Create a Controlled Form

Create a Controlled Form
0.0 0

#1

Tell us what’s happening:

What am I missing?

Your code so far


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 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15.

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


#2

The instructions for the handleSubmit method are:

You should then complete the handleSubmit method so that it sets the component state property submit to the current input value in the local state

event.target.value is not the current input value in the local state


#3

Thanks, It’s true. It should be submit: this.state.input :ok_hand: