React TutorialLesson 33Free preview

React Multiple Inputs

This lesson is part of React · All levels

Summary

When a form has a lot of inputs, you don't need to create separate states for each column. Just one state object with the property according to the input name, then one general handler uses the name attribute to determine which field is updated. This pattern keeps the form code concise and easy to add.

Key points

Save the entire value of the form in one object state
Use the name attribute to identify each input
The handler reads e.target.name and e.target.value at once
Update the state immutably with the spread operator

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.