Create a Controlled Form - Multiple Inputs

JavaScript
1

Tell us what’s happening:
My code passes, but I want to apply this lesson to a form with multiple inputs. However, I haven’t found a simple answer to it yet, but I have found complicated ones.
For multiple form inputs,

  1. How do the properties in the state change? Looking at some complicated examples, it looks like all state properties would just be the fields we want, and never the input or submit.
    this.state { name: '', email: '', etc: '', etcJr: ''}
  2. How does the handleChange change if at all with multiple inputs? With different properties, event.target.value would seem to work, but it seems the key can’t be input for all of them? Do I write multiple functions for each html input, add another parameter to handle change, and/or change input to a variable?
  this.setState({
    input: event.target.value
  });```
3. Why is this.setState no longer followed by state in the handleChange function, as it was in other methods? 
ex.
```increment(){this.setState(state => ({count: state.count -1});}```
Is the a simple example of this online that someone can link. I'll keep looking, but I would assume other people have the same questions. So, I assume this is a good question to post.
Thanks for any help.
**Your code so far**
      
```jsx

class MyForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    submit: ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
handleSubmit(event) {
  // change code below this line
  this.setState({
    submit: this.state.input
  });
  // change code above this line
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        { /* change code below this line */ }
        <input value={this.state.input} onChange={this.handleChange.bind(this)}/>
        { /* change code above this line */ }
        <button type='submit'>Submit!</button>
      </form>
      { /* change code below this line */ }
      <h1>{this.state.submit}</h1>
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Create a Controlled Form

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-form

2

Hey @ryegrammer,

  1. Ideally you want unique IDs for the form and all the inputs and then your state would look something like:
this.state = {
  formID: {
    input1Id: '',
    input2Id: '',
    ...
  },
};
  1. This will allow you to use universal handleChange(), like so:
this.handleChange(e) {
  const { id, value } = e.target;
  const update = {};
  update[id] = value;
  this.setState(update);
}
  1. Because you don’t need previous value, like in example with counter, to calculate new one
1 Like