React: Create a Controlled Input

JavaScript
1

Tell us what’s happening:

I don’t know what i am missing, I will appreciate help

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.target.value
      });
    }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
          <input value={this.state} 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 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:

2 Likes
2

Hi there,

Try looking at your <input> element and look at what value you pass into it.

Remember that this.state is an object and you need a part of that object and not the whole.

Hopefully that helps. Feel free to comment if my help is unclear.

1 Like
3

How can i access part of the object? I am not sure

1 Like
4

Okay, so you have this.state

What’s inside that this.state?

this.state = {
      input: ''
    };

This means that you have input as part of this.state. To access that input, you can use the dot notation: this.state.input.

If it’s still unclear, do tell me.

1 Like
5

It is not clear, I cannot figure out what i am missing in the implementation.

1 Like
6

That’s fine.

Okay, can you find the following line.

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

See that you are passing the this.state instead of the input part of the state. That’s why when you look at your field, the field has this weird [Object object] in it.

Your input only wants a string and not an object.

Below is the change but try to figure out on your own before looking at it.

<input value={this.state.input} onChange={this.handleChange} />
2 Likes
7

My goodness:smiley::smiley:

1 Like
8

I hope that means you got it? :smiley:

9

Yes, thank you for the help

1 Like
10

No problem, I’m doing my best.

2 Likes