Create a Controlled Form (React Help)

JavaScript
1

I’m confused… It does what it should not sure I understand what this test is asking for.

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

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: this.state.input
      });
    // Change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/* Change code below this line */}
          <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>
    );
  }
}
2

Add the input element in the form and set its value and onChange() attributes like the last challenge.

You are missing the value attribute on the input element, which should be set to the input state property.

1 Like
3

I understand thanks.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.