How to handle multiple input field in react form with a single function?

30 Sep, 2020
There are two types of form, one is uncontrolled form and another one is controlled form. In uncontrolled form values of the input field stored in DOM and whenever we want to use the values we have to reach the DOM and pull out the values of each input field. Now in control, we do not allow to store the value in DOM but values are store as a state of react component and updated dynamically with user interaction. For this, we use the event handler onChange and executes a callback that updates the state values.  Now for a single input field, we use one handleChange callback but if the input fields are multiple then we have to create multiple handleChange callbacks to update the state of each input field. Fortunately, this is not the case. JavaScript provides us with ES2015 modern syntax to execute this kind of complicated work in a simple manner.
ES2015 introduced the ability to create objects with dynamic keys based on JavaScript expression called as computed property names. We use computed property names to update the state of all the input fields based on the name attribute of inputs. 
Syntax : 
const obj = {
   : value
}

Example 1: This example shows how to handle multiple form input fields with a single handleChange function.
index.js:JavascriptJavascriptimport React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
index.js:
Javascript
import React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
App.js : App component  renders single Form component onlyJavascriptJavascriptimport React from 'react'import Form from './Form'  //Functional componentconst App = () => {  //render single App component  return(    <Form />  )}  export default App
App.js : App component  renders single Form component only
Javascript
import React from 'react'import Form from './Form'  //Functional componentconst App = () => {  //render single App component  return(    <Form />  )}  export default App
Form.js: Form component renders a form and contains all the logic to make it controlled form and submitting the form.JavascriptJavascriptimport React,{ Component } from 'react'  class Form extends Component{  constructor(props){    super(props)    this.state = { email:'',name:'', age:null, address:'',phoneNo:''}    this.handleChange = this.handleChange.bind(this)    this.handleSubmit = this.handleSubmit.bind(this)  }    // Form submitting logic, prevent default page refresh   handleSubmit(event){    const { email, name, age, address, phoneNo } = this.state    event.preventDefault()    alert(`      ____Your Details____\n      Email : ${email}      Name : ${name}      Age : ${age}      Address : ${address}      Phone No : ${phoneNo}    `)  }    // Method causes to store all the values of the   // input field in react state single method handle   // input changes of all the input field using ES6   // javascript feature computed property names  handleChange(event){    this.setState({      // Computed property names      // keys of the objects are computed dynamically      [event.target.name] : event.target.value    })  }    // Return a controlled form i.e. values of the   // input field not stored in DOM values are exist   // in react component itself as state  render(){    return(      <form onSubmit={this.handleSubmit}>        <div>          <label htmlFor='email'>Email</label>          <input             name='email'            placeholder='Email'             value = {this.state.email}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='name'>Name</label>          <input            name='name'             placeholder='Name'            value={this.state.name}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='age'>Age</label>          <input            name='age'             placeholder='Age'            value={this.state.age}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='address'>Address</label>          <input            name='address'             placeholder='Address'            value={this.state.address}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='phoneNo'>Phone Number</label>          <input            name='phoneNo'             placeholder='Phone No'            value={this.state.phoneNo}            onChange={this.handleChange}          />        </div>        <div>          <button>Create Account</button>        </div>      </form>    )  }}  export default Form
Form.js: Form component renders a form and contains all the logic to make it controlled form and submitting the form.
Javascript
import React,{ Component } from 'react'  class Form extends Component{  constructor(props){    super(props)    this.state = { email:'',name:'', age:null, address:'',phoneNo:''}    this.handleChange = this.handleChange.bind(this)    this.handleSubmit = this.handleSubmit.bind(this)  }    // Form submitting logic, prevent default page refresh   handleSubmit(event){    const { email, name, age, address, phoneNo } = this.state    event.preventDefault()    alert(`      ____Your Details____\n      Email : ${email}      Name : ${name}      Age : ${age}      Address : ${address}      Phone No : ${phoneNo}    `)  }    // Method causes to store all the values of the   // input field in react state single method handle   // input changes of all the input field using ES6   // javascript feature computed property names  handleChange(event){    this.setState({      // Computed property names      // keys of the objects are computed dynamically      [event.target.name] : event.target.value    })  }    // Return a controlled form i.e. values of the   // input field not stored in DOM values are exist   // in react component itself as state  render(){    return(      <form onSubmit={this.handleSubmit}>        <div>          <label htmlFor='email'>Email</label>          <input             name='email'            placeholder='Email'             value = {this.state.email}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='name'>Name</label>          <input            name='name'             placeholder='Name'            value={this.state.name}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='age'>Age</label>          <input            name='age'             placeholder='Age'            value={this.state.age}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='address'>Address</label>          <input            name='address'             placeholder='Address'            value={this.state.address}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='phoneNo'>Phone Number</label>          <input            name='phoneNo'             placeholder='Phone No'            value={this.state.phoneNo}            onChange={this.handleChange}          />        </div>        <div>          <button>Create Account</button>        </div>      </form>    )  }}  export default Form
Output :
Example 2 : 
index.js:JavascriptJavascriptimport React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
index.js:
Javascript
import React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
App.js: App component renders a single BoxList component onlyJavascriptJavascriptimport React from 'react';import BoxList from './BoxList'  const App = () => {  //App renders single BoxList component  return(    <BoxList />  )}  export default App
App.js: App component renders a single BoxList component only
Javascript
import React from 'react';import BoxList from './BoxList'  const App = () => {  //App renders single BoxList component  return(    <BoxList />  )}  export default App
BoxList.js: It contains all the behind the logic. It is a stateful component. There is a single state that contains an array of boxes. We map over each box of state ‘boxes’ and for eachbox we render a ‘Box’ component. BoxList component also contains methods create that is responsible to create box based on given properties. BoxComponent also renders ‘NewBoxForm’  that shows a form to the user to enter the height, width, and background color of the box they want to create. BoxList component passes the create a method to NewBoxForm component as a prop to each ‘Box’ component as a prop. These components are then invoked the given methods at right time according to the user interactions with the app.JavascriptJavascriptimport React, { Component } from 'react'import { v4 as uuid } from 'uuid'import NewBoxForm from './NewBoxForm'import Box from './Box'  class BoxList extends Component{  constructor(props){    super(props)    // Single state boxes initialized with empty array    // it contains all the created boxes and their properties    this.state = { boxes : [] }    this.createBox = this.createBox.bind(this)  }    // create new box and added it to boxes state  createBox(attrs){    const newBox = { ...attrs, id : uuid()}    this.setState({      boxes : [...this.state.boxes, newBox]    })  }    // Map over each box in boxes state and render a   // Box component for each passing its property as  // props and method is also passed as props which gets   // called by the handler callback of Box component  renderBoxes(){    return this.state.boxes.map(box => (      <Box key={box.id} attrs={box} />    ))  }      render(){    return(      <div>        <h1>Make New Color Boxes!</h1>        {/* component to create form              and passes create method as */}        <NewBoxForm create={this.createBox}/>        {this.renderBoxes()}      </div>    )  }}  export default BoxList
BoxList.js: It contains all the behind the logic. It is a stateful component. There is a single state that contains an array of boxes. We map over each box of state ‘boxes’ and for eachbox we render a ‘Box’ component. BoxList component also contains methods create that is responsible to create box based on given properties. BoxComponent also renders ‘NewBoxForm’  that shows a form to the user to enter the height, width, and background color of the box they want to create. BoxList component passes the create a method to NewBoxForm component as a prop to each ‘Box’ component as a prop. These components are then invoked the given methods at right time according to the user interactions with the app.
Javascript
import React, { Component } from 'react'import { v4 as uuid } from 'uuid'import NewBoxForm from './NewBoxForm'import Box from './Box'  class BoxList extends Component{  constructor(props){    super(props)    // Single state boxes initialized with empty array    // it contains all the created boxes and their properties    this.state = { boxes : [] }    this.createBox = this.createBox.bind(this)  }    // create new box and added it to boxes state  createBox(attrs){    const newBox = { ...attrs, id : uuid()}    this.setState({      boxes : [...this.state.boxes, newBox]    })  }    // Map over each box in boxes state and render a   // Box component for each passing its property as  // props and method is also passed as props which gets   // called by the handler callback of Box component  renderBoxes(){    return this.state.boxes.map(box => (      <Box key={box.id} attrs={box} />    ))  }      render(){    return(      <div>        <h1>Make New Color Boxes!</h1>        {/* component to create form              and passes create method as */}        <NewBoxForm create={this.createBox}/>        {this.renderBoxes()}      </div>    )  }}  export default BoxList
NewBoxForm.js: This component is responsible to show the form to users to enter the properties of the box they wanted to create. The form is a controlled form i.e. it stores the values of the input field in states and updates it in real-time according to user interaction with input fields of the form. It invoked handle submit callback after submitting the form which in return invoke the create method of BoxList component passing the form values to create the box.JavascriptJavascriptimport React,{ Component } from 'react'  class NewBoxForm extends Component{  constructor(props){    super(props)    this.state = { height : 0, width : 0, bc : ''}    this.handleChange = this.handleChange.bind(this)    this.handleSubmit = this.handleSubmit.bind(this)  }    // Form submitting logic, prevent default page   // refresh and call create method of BoxList  // component to create new box  handleSubmit(event){    event.preventDefault()    this.props.create(this.state)    this.setState({ height : 0, width : 0, bc : ''})  }    // Method causes to store all the values of the   // input field in react state using single method   // handleChanges of all the input field  // using ES6 javascript feature computed property names  handleChange(event){    this.setState({      [event.target.name] : event.target.value    })  }    // return a form using which we add box properties   // to create Boxes. It is controlled form i.e. values   // of the input field not stored in DOM values are exist  // in react component itself as state    render(){    return(      <form onSubmit={this.handleSubmit}>        <div>          <label htmlFor='height'>Height</label>          <input             name='height'            placeholder='Height'             value = {this.state.height}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='width'>Width</label>          <input            name='width'             placeholder='Width'            value={this.state.width}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='bc'>Background Color</label>          <input            name='bc'             placeholder='Background Color'            value={this.state.bc}            onChange={this.handleChange}          />        </div>        <div>          <button>Add a new Box!</button>        </div>      </form>    )  }}  export default NewBoxForm
NewBoxForm.js: This component is responsible to show the form to users to enter the properties of the box they wanted to create. The form is a controlled form i.e. it stores the values of the input field in states and updates it in real-time according to user interaction with input fields of the form. It invoked handle submit callback after submitting the form which in return invoke the create method of BoxList component passing the form values to create the box.
Javascript
import React,{ Component } from 'react'  class NewBoxForm extends Component{  constructor(props){    super(props)    this.state = { height : 0, width : 0, bc : ''}    this.handleChange = this.handleChange.bind(this)    this.handleSubmit = this.handleSubmit.bind(this)  }    // Form submitting logic, prevent default page   // refresh and call create method of BoxList  // component to create new box  handleSubmit(event){    event.preventDefault()    this.props.create(this.state)    this.setState({ height : 0, width : 0, bc : ''})  }    // Method causes to store all the values of the   // input field in react state using single method   // handleChanges of all the input field  // using ES6 javascript feature computed property names  handleChange(event){    this.setState({      [event.target.name] : event.target.value    })  }    // return a form using which we add box properties   // to create Boxes. It is controlled form i.e. values   // of the input field not stored in DOM values are exist  // in react component itself as state    render(){    return(      <form onSubmit={this.handleSubmit}>        <div>          <label htmlFor='height'>Height</label>          <input             name='height'            placeholder='Height'             value = {this.state.height}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='width'>Width</label>          <input            name='width'             placeholder='Width'            value={this.state.width}            onChange={this.handleChange}          />        </div>        <div>          <label htmlFor='bc'>Background Color</label>          <input            name='bc'             placeholder='Background Color'            value={this.state.bc}            onChange={this.handleChange}          />        </div>        <div>          <button>Add a new Box!</button>        </div>      </form>    )  }}  export default NewBoxForm
Box.js: It is responsible to show each box with its proper height, width, color set in the background. JavascriptJavascriptimport React, { Component } from 'react'  class Box extends Component {  render(){    const { height, width, bc } = this.props.attrs    const style = { width: `${width}em`, height:`${height}em`, backgroundColor:bc}    return(      <div style={style} />    )  }}  export default Box
Box.js: It is responsible to show each box with its proper height, width, color set in the background. 
Javascript
import React, { Component } from 'react'  class Box extends Component {  render(){    const { height, width, bc } = this.props.attrs    const style = { width: `${width}em`, height:`${height}em`, backgroundColor:bc}    return(      <div style={style} />    )  }}  export default Box
Output :
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?