Menu

gitpiper

useForm react Code Snippet in 2024

hooksstatebeginner

Last Updated: 3 December 2024

Creates a stateful value from the fields in a form.

  • Use the useState() hook to create a state variable for the values in the form.
  • Create a function that will be called with an appropriate event by a form field and update the state variable accordingly.
const useForm = initialValues => { const [values, setValues] = React.useState(initialValues); return [ values, e => { setValues({ ...values, [e.target.name]: e.target.value }); } ]; };
const Form = () => { const initialState = { email: '', password: '' }; const [values, setValues] = useForm(initialState); const handleSubmit = e => { e.preventDefault(); console.log(values); }; return ( <form onSubmit={handleSubmit}> <input type="email" name="email" onChange={setValues} /> <input type="password" name="password" onChange={setValues} /> <button type="submit">Submit</button> </form> ); }; ReactDOM.render(<Form />, document.getElementById('root'));

react snippet similar to useForm For You in December 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️