Breaking News: Grepper is joining You.com. Read the official announcement!

example form using React Hooks

Depressed Dogfish answered on July 18, 2021 Popularity 10/10 Helpfulness 3/10

answer example form using React Hooks

related react hooks form basic

example form using React Hooks

Comment

import React, { useState } from "react";

const DynamicTitle = () => {
  const [title, setTitle] = useState("Hooks are so fun!");
  const [inputText, setInputText] = useState("");

  const handleChanges = e => {
    setInputText(e.target.value);
  };

  const changeTitle = e => {
    e.preventDefault();
    setTitle(inputText);
    setInputText("");
  };

  return (
    <div className="Wrapper">
      <h1 className="Title">{title}</h1>
      <form onSubmit={changeTitle}>
        <div className="Input">
          <input
            className="Input-text"
            id="input"
            name="inputText"
            onChange={handleChanges}
            placeholder="Create new title"
            type="text"
            value={inputText}
          />
          <label htmlFor="input" className="Input-label">
            New title
          </label>
        </div>
      </form>
    </div>
  );
};

export default DynamicTitle;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: learn.lambdaschool.com

Tags: javascript react-hooks using

Link to this answer
Share Copy Link

Contributed on Jul 18 2021

Depressed Dogfish

0 Answers Avg Quality 2/10

Closely Related Answers

react hooks form basic

Comment

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
      <select {...register("Title", { required: true })}>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>

      <input {...register("Developer", { required: true })} type="radio" value="Yes" />
      <input {...register("Developer", { required: true })} type="radio" value="No" />

      <input type="submit" />
    </form>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: react-hook-form.com

Tags: basic basi

Link to this answer
Share Copy Link

Contributed on Apr 20 2023

shahul

0 Answers Avg Quality 2/10

example form using React Hooks

Contents

More Related Answers

example form using React Hooks

Closely Related Answers

react hooks form basic

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.