Create a Controlled Form - input should change state

What’s happening:

The code seems to work correctly, but it does not validate. The test fails at the following:

Typing in the input element should update the input property of the component’s state.

As far as I can see the input state is being changed.

My 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) {
    event.preventDefault()
    this.setState({ 
      submit: this.state.input
    })
  }
  render() {
    return (
      <div>

        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.handleChange} />
          <button type='submit'>Submit!</button>
        </form>

        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.35 Safari/537.36.

Link to the challenge:

The input should be set up to always show this.state.input:

<input value={this.state.input} onChange={this.handleChange} />
1 Like

Thanks, I new I was missing something obvious!

1 Like