React forms setting state

JavaScript
1 

having trouble with the handle submit, it sets  submit in the state to event.target.value which is the same as the input right? Not sure what is going wrong

**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
  event.preventDefault();
   this.setState({
    submit: event.target.value
  });
  // 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}/>
        { /* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 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

You are not getting event.target.value when pressing button, you need to set submit value from the state.

3

im not sure i understand, am i not setting the submit in the state when i write ```

this.setState({
submit: event.target.value
});

4

What I meant is in the
submit: event.target.value
part event.target.value is undefined, so you need to take variable (input) from the state and use that to assign submit.

5

thanks for the help, I passed the challenge now changing this setState code to the below, but I am suprised because I thought you should not refer to state in the setState?

this.setState({
    submit: this.state.input
  });
1 Like
6

ahh I read the documentation again, so I think this is right way to do it

this.setState((state) => ({
  submit: state.input 
}));