A Controlled Input: code works, but does not pass

I’ve got my code to work as expected, but it does not pass the following test:
" Typing in the input element should update the state and the value of the input, and the p element should render this state as you type."

When I type in the box, however, I do see the ‘p’ update. Did I misinterpret the task?

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line
    this.handleChange = this.handleChange.bind(this)
    // Change code above this line
  }
  // Change code below this line
    handleChange(event) {
      this.setState ({
        input: event.target.value
      })
    }
  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}
         <input value={this.input} onChange={this.handleChange} type="text"></input>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

link to task: https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-input

edit: after re-reading the hints page, I found that this paragraph was also applicable to my case:

But this just won’t serve your purpose. Although you might feel that its working. So what’s happening here is text updates from the browser not the state. So to correct this we’ll add a value attribute and set it to this.state.input to the input element which will make the input get controlled by state.

I changed {this.input} to {this.state.input} and it passed :slight_smile: