P element change, Controlled input

This code does not meet the third requirement.
“Typing in the input element should update the state and the value of the input, and the p element should render this element as you type.”
The meaning of this test seems to be in the latter half. It seems to ask for typed input to be saved into the textbox. If the textbox is supposed to save, then the code fails due to the text not being saved. Hard to say what being saved would look like. Maybe text should appear in text box. I seem to not be understanding the requirements.

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.input});
  }
// 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 Edg/89.0.774.50.

Challenge: Create a Controlled Input

Link to the challenge:

I can se your bug.
You access the event wrong way in you setState function.

Read more about events on w3.

When you type inside <input>, text should be seen both in input box and in <p>.

1 Like

Your pointer worked.
Form elements take a change. Into the form is an object. That object has its value changed through its access.

<input onChange={this.handleChange} />
<input value={this.state.input} />
handleChange(event)     {
this.setState(
{
input: event.target.value
}
);
}

Solution.

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.