How to update state with controlled input?

JavaScript
1

Tell us what’s happening:

I’m trying to follow along with this tutorial but cannot get a grip on the instructions.

I’ve tried to redo the code to follow the advice in the guide - but I’m not sure if it is deliberately following a pattern that differs from the previous tutorials or if I am supposed to try and figure out the difference between the steps in the guide and what’s need to get the tests to pass.

Something is wrong in the handleChange event. I ended up replacing my attempt at this with the version shown in the guide - but I still can’t get it to work. The react documentation doesn’t look like the guide - I think that’s because a newer version of react is available now - so I’m stuck.

Thank you for your help.

Your code so far

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = '';
    // change code below this line
this.setState = {
  input: ''
};

    // 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.state.input} onChange = {this.handleChange.bind(this)}/>

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

I found the line that was missing to set the bind.this on the handleChange, as follows, but adding this alone is not enough. I’ve tried different ways of adding the setState to make the initial value of input, but I cant seem to find one that works. What is the general this.state doing? Is it an umbrella to cover all the inputs?

this.handleChange = this.handleChange.bind(this);

3

You created little mess with the state’s initialization:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = '';
    // change code below this line
this.setState = {
  input: ''
};

The original is just fine. Don’t touch it and your code passes:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line

    // change code above this line