How to Use a Single Function to Manage React Form State

Learn how to use a single function to manage React form state. When working with large React forms, it is inefficient to use a separate useState hook and onChange handler for each controlled input. In this tutorial, we will create a change handler function to use for all controlled inputs and only requires one useState hook.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

How to Use a Single Function to Manage React Form State

(00:00) Intro
(00:16) Welcome
(00:29) Starter code & Overview
(02:22) useState
(03:12) handleSubmit
(03:32) JSX content
(04:29) handleChange
(08:46) Exception: Inputs with multiple attribute
(09:34) Destructuring state for validation
(11:29) Checking form functionality

📚 Tutorial References:
🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

Was this React Form Change Handler Function tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #form #function

[yourdreamfulfilledhere]

Dave, I love your RTK query tutorial, especially for advanced features like adapter/entities/prefetch/subscribe, they are not easy to be used correctly, pls make more tutorial about this for our better understanding, thanks.

[engladsjbanan]

Your channel is my precious! :p Thank you so much mr. Gray!
Currently trying to learn some CSS.
Lots of love from Norway!

[gilalingayao]

I'm always looking forward for your videos, I've learnt a lot from your tutorials, thank you so much. The RTK MERN Stack is superb 👍

[samislam]

I used the lodash method _.merge() to merge the previous state with a newer one.
The benifit of this is to merge the nested objects as well.

I Made that logic in a hook called useStates().
I'm using this hook as
const [state, setState] = useStates()
<input value={state.email} value})}>

Now I'm using it everywhere!
And It works great!
Thanks!

[nanonkay]

Are you into component libraries? If so, you should really check out Mantine. It incorporates react-hook-form into its form management and it's an absolute blessing to work with. A lot of things are covered from error handling, input validation, form state, input state etc and very easy to use and understand

[McProski]

Such a great guide to reference, thanks for putting this together.

[nangialaistoman]

Great tutorial Dave 🙌 keep up the good work

[raffaelenicosia]

Hi Dave, wouldn't this be a good use case for useReducer hook? Would you still prefer useState over it? Thanks for your hard work, stellar content!

[kevl]

Excellent Dave 👏 I had previously learned (and used) a more complex setup whereby in the one useState hook, each input had its own object that held a "value" and an "isValid" property, and the state also held an overall formIsValid property. A case of over-engineering I think as your code does pretty much the same thing but much more succinctly with the use of regex.

[samdimahmood]

Awesome explanation. Waiting for the next video!

[supercoolcat]

A full tutorial on firebase would be awesome right now boss man. Love your content 💯. Stay blessed Dave

[sreeharims]

Videos like these are very useful, Thanks

[ahmad-murery]

Hello Dave,
- From a vanilla JS guy point of view, we can actually use one change event on the form to catch all changes on its controls,

- On Form.js:26 just in case we need to get the checkbox value instead of its checked state, we can get the value if the control is checked.


Thanks

[sogggy]

Thanks. Appreciate these types of videos.

[mjprakash]

can you please make video about sockets and integrate it with react..

[abvenant]

Hello Dave, Thank you for your tutorials, they are well prepared and comprehensive. I just have one question; would multiple different selections work as well?

[Anbaraen]

Thanks Dave, great video. I wonder if you had any solutions for doing this in Typescript? In my experience the compiler wasn't happy with the spread + new value syntax and I had to do some weird Modify type to satisfy it. It's green but it feels like a bad pattern!

[oussemabouyahia]

also please, is it possible to create the select tag (refer to states) as a component and fill it in by array.map() method ?

[winterwowl]

hello Dave, what extension do you use, that show vertical and horizontal line at function scope?

[AlesaGillespie]

The company I'm currently working gave me a task to create a multistep form with 16 inputs. They don't want to use form-libraries and, at the end, I end up doing something similar. Created a custom hook using Redux's useDispatch with mask, zipcode autofill, validations, etc. I also created a schema for every input... the same job of every form-library anyway.