Create a Controlled Input noww

Tell us what’s happening:
any suggestion on whats the error

  **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.input
})
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}
<input type="text"value={this.state.input} onChange={this.handleChange}/>
      { /* Change code above this line*/}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

You have event.target.input the property is value, not input

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


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

thank you for the solution

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