Feeling hesitant because this is probably dumb

JavaScript
1

Tell us what’s happening:

Your code so far


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.input.value
});
}
// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}
<input value = {this.state.input} onChange = {this.handleChange} />
      { /* 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.13; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Create a Controlled Input

Link to the challenge:

Please don’t tell me this a silly, simple misspelling issue or something like that…

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.

2

Now that the forum is back, can someone please help me? Thank you!

Wow! How did I get 135 views on this? How bored was everyone!?

3

Hey there,

This is where your issue is:

event.input.value

I will not give you the answer, but I suggest you console.log(event), and have a look at the object…

Hope this helps

1 Like
4

Thank you I’ll look at it

5

I’m still blank. Um, could you explain it a little?

6

Here is a part of the instructions:

First, create a method called handleChange() that has a parameter called event . When the method is called, it receives an event object that contains a string of text from the input element. You can access this string with event.target.value inside the method. Update the input property of the component’s state with this new string.

1 Like
7

Ohhhh! I got it! event.value. Duh! Thank you!