Creating controlled input in react

Question

I'm a newbie and learning React with FreeCodeCamp. On this challenge it says:

When you type in the input box, that text is processed by the handleChange() method, set as the input property in the local state, and rendered as the value in the input box on the page. The component state is the single source of truth regarding the input data.

I wrote this 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>
  );
}
};

the console says:

“Build error, open your browser console to learn more.”

Where am I doing wrong? I cannot see my mistake..

Andrew Zheng · Accepted Answer · 2020-12-13 23:29:40Z

3

The issue is related to how you assign the event handler to onChange.

onChange expects a callback function which will be fired when value of the input is changed. With onChange={this.handleChange()} in your post, you actually assigns undefined to onChange since handleChange function update the component state but it doesn't return anything.

Change it to onChange={this.handleChange} does what you expect it to work. When input is changed, this.handleChange will be called and event object will be passed in as parameter.

Hopefully that helps.

answered Dec 13, 2020 at 23:29

Andrew Zheng

2,8681 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xehpuk Over a year ago

That's not true. It doesn't assign undefined, it throws because event is undefined.

xehpuk · Accepted Answer · 2020-12-13 23:24:38Z

1

You're calling handleChange instead of passing its reference as the onChange prop.

answered Dec 13, 2020 at 23:24

xehpuk

8,3704 gold badges37 silver badges61 bronze badges

Comments

Jamie Fisher · Accepted Answer · 2020-12-13 23:27:33Z

1

You likely do not need to run your handleChange method in the onChange prop. So you would have this instead:

onChange={this.handleChange}

answered Dec 13, 2020 at 23:27

Jamie Fisher

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Creating controlled input in react

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related