Create a Controlled Input 5

LBDemaree · July 24, 2019, 3:40am

Tell us what’s happening:
Having major trouble figuring this one out. I’ve tried looking at the hits, yet it says I have the wrong coding in it, and I have no clue what I did wrong. Anyone know how to correctly fix it?

Your code so far


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
    // change code above this line
  }
  // change code below this line
<input value = {this.state.input}/>
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36 Avast/75.0.1447.81.

Link to the challenge:

LBDemaree · July 24, 2019, 7:44pm

I reset my code, but still have gotten it wrong. I have changed the code multiple times, only to get it incorrect. Here’s my newest code:

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

What am I doing wrong here?

DanCouper · July 24, 2019, 8:36pm

The first curly bracket here should be deleted:

}
  // change code above this line
  render() {

LBDemaree · July 24, 2019, 8:49pm

Okay. I deleted it, but I still have an error. New code is this:

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

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Now what else am I doing wrong? This is so confusing.

DanCouper · July 24, 2019, 9:48pm

You’ve put handleChange inside the constructor.

class MyClass {
  constructor () {
    // values you want to initialise when
    // the class is instantiated go here
  }

  method () {
    // this is a function added to the prototype
    // of the class, so it can be used by any
    // member of that class. Like `render()` or
    // `handleChange()`
  }
}

LBDemaree · July 24, 2019, 9:54pm

I don’t quite understand what you mean. I’m steadily trying to complete it, but I keep getting errors.

DanCouper · July 24, 2019, 10:00pm

You have a function called handleChange which is inside the function called constructor.

It should be alongside the function called constructor, not inside it.

The class should contain three functions alongside each other: constructor, handleChange and render.

LBDemaree · July 24, 2019, 10:11pm

Okay, I’m trying the best I can to figure out what I’m doing wrong, yet I keep getting the incorrect coding. Here’s my latest code I just did:

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

What should be different here?

DanCouper · July 25, 2019, 10:25am

You’ve moved the method outside the constructor but you’ve replaced it with another identical one.

It is asking you to bind the method in the constructor, which ensures that it always gets called with the correct value for this

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

Which says “assign to the property handleChange a version of the handleChange function that will always get called with the correct value for this”

LBDemaree · July 25, 2019, 1:53pm

I tried putting that in, and I still got an incorrect code error. Here’s my newest code update:

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() {
      this.setState({
        input: event.target.value
      });
    }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

What am I doing wrong now? I’m so confused.

LBDemaree · July 26, 2019, 1:42am

I’m trying to get a better understanding of this, but I keep getting it wrong. Here’s my newest code as of now:

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

Now what am I doing wrong? My brain is getting fried from trying to learn this. I’ve been working on this one since yesterday or the day before, and I, for the sake of my life, cannot figure it out.

LBDemaree · July 26, 2019, 1:53am

To be honest with you, no, I do not understand at all. I’m completely and utterly confused.

DanCouper · July 26, 2019, 1:53am

The method does not go in the constructor. A constructor function creates an object with some properties -

class Example {
  constructor() {
    this.property1 = 1;
    this.property2 = 2;
  }
}

new Example()
// creates an object like so:
// { property1: 1, property2: 2 }

The methods on the other hand are functions you define outside the constructor, and they get attached to the prototype, so they are available to every instance of that class.

This is asking you to do three things:

add the method, which is a function that takes one argument (the event). Your function does not have this parameter, and is in the wrong place.
bind the method in the constructor - this assigns it to a property. This is as I described, exactly. It is not asking you to define a function in the constructor, it is asking you to bind the method called handleChange.
add an onChange handler. This is a JS event handler, and you use it in JSX like <input onChange={/* the function you want to execute when the input changes*/} />

LBDemaree · July 26, 2019, 1:57am

Okay, I moved the code for handleChange, so I still am lost. I’m sorry, my learning disabilities are kicking in so badly, that it’s hard for me to understand things like this.

DanCouper · July 26, 2019, 1:59am

Second thing:

Third thing:

LBDemaree · July 26, 2019, 2:03am

Okay, here is my updated code that tells me I did it wrong yet again:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    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 onChange = {this.handleChange.bind(this)
        }/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Now what in the world am I doing wrong? I’m so confused, my learning disability is taking over, and it’s hard for me to understand things easily tonight.

pkj-ind · July 26, 2019, 2:39am

Hi ! I have corrected your code and pasting below. I have tested and it is working one. You need to change code 2 places.

You can compare with my code, I am sure you yourself will spot it. Still any query, please revert:

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 (

{ /* change code below this line /}

{ / change code above this line */}

Controlled Input:

{this.state.input}

);
}
};

LBDemaree · July 26, 2019, 2:50am

I still got it incorrect. Here’s my newest code compared to your code:

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.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

I do not understand how I keep getting an error.

pkj-ind · July 26, 2019, 2:56am

Yes Still you need to change the correct at one last place (inside render() method)
Correct code should be:

   <input type='text' onChange={this.handleChange} value={this.state.input} />

LBDemaree · July 26, 2019, 3:00am

Thank you so much! I have been struggling to figure out how to do that. Now that I have it complete, I feel better. That was super hard for someone who’s fixing to start Cybersecurity and Networking on the 5th next month, considering I have learned A LOT of coding on here and have passed A LOT of lessons by myself, with the occasional help from time to time.