react hook from

import React from 'react';import { useForm } from 'react-hook-form'; function App() { const { register, handleSubmit, errors } = useForm(); // initialise the hook const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="firstname" ref={register} /> {/* register an input */} <input name="lastname" ref={register({ required: true })} /> {errors.lastname && 'Last name is required.'} <input name="age" ref={register({ pattern: /\d+/ })} /> {errors.age && 'Please enter number for age.'} <input type="submit" /> </form> );}

react hook form

import React from 'react';
import { useForm } from 'react-hook-form';
import "./App.css";

type Profile = {
  firstname: string
  lastname: string
  age: number
}

function App() {
  const {register, handleSubmit, errors} = useForm<Profile>()

  const onSubmit = handleSubmit((data) => {
    alert(JSON.stringify(data))
  })

  return (
    <main>
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="firstname">First Name</label>
        <input ref={register({ required: true })} id="firstname" name="firstname" type="text"/>
        {
          errors.firstname && <div className="error">Enter your name</div>
        }
      </div>
      <div>
        <label htmlFor="lastname">Last Name</label>
        <input ref={register({ required: true })} id="lastname" name="lastname" type="text"/>
        {
          errors.lastname && <div className="error">Enter your last name</div>
        }
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input ref={register({ required: true })} id="age" name="age" type="text"/>
        {
          errors.age && <div className="error">Enter your age</div>
        }
      </div>
      <button type="submit">Save</button>
    </form>
    </main>
  );
}

export default App;

Posted by: Guest on October-07-2020

import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

Code answers related to "react hook from"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "react hook from"

Code answers related to "react hook from"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us