28. React: Create a Controlled Input

Tell us what’s happening:
I must be missing something since the ControlledInput: info in the output is not showing up.

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
  // Change code above this line
}
// Change code below this line
handleChange(event){
this.setState(state =>({
  input: state.event.target.value
}));
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}
handleChange(event){
this.setState(state =>({
  input: state.event.target.value
}))
}
      { /* 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/86.0.4240.75 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

I guess here is where you missed it… Should be
this.setState({ input: event.target.value}) so that input will be overridden - u should pass an object not arrow func.

Thank you very much for your help!

class ControlledInput extends React.Component {

constructor(props) {

super(props);

this.state = {

  input: ''

};

}

handleChange(event) {

this.setState({

  input: event.target.value

});

}

render() {

return (

  <div>
    <h4>Controlled Input:</h4>

    <p>{this.state.input}</p>

  </div>

);

}

};

Here’s the full solution. If someone has a completely different alternative solution that could work, other than this way please do share.

Thanks for your help, Prithiviraj! I was able to get the program to work!

image001.png

image002.jpg

image003.jpg

image004.jpg

image005.jpg

1 Like