ReactJs print value of input field

Question

I'm trying to print instantly my input value in the render function.

In the documentation of the concept of state and lifecycle in a React component, I see the use of a constructor with a super(props) as well as this.state.

I get the error below when trying same;

Uncaught TypeError: Cannot read property 'state' of undefined

Below is my code;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  };

  handleChange(event) {
    this.setState({
      text: event.target.value
    });
  };

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.text}.</h2>
        <input type="text" onKeyUp={this.handleChange} />
      </div>
    );
  }
}

How can I fix it?

this.handleChange=this.handleChange.bind(this) in constructor — Burak Karasoy
– Burak Karasoy, Commented Oct 24, 2016 at 17:28

Frazer Kirkman · Accepted Answer · 2016-10-24 17:27:49Z

3

when you call a function like that, it is called by the window, not by your react object.

To make the function be bound to your react object (and have the ability to use the setState method, you need to use this:

onKeyUp={this.handleChange.bind(this)}

this will bind it to your react object :)

answered Oct 24, 2016 at 17:27

Frazer Kirkman

1,2041 gold badge16 silver badges25 bronze badges

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

1 Comment

Frazer Kirkman Over a year ago

What @Burak said in the comment on your question about binding it in the constructor is also a good suggestion, especially if you will use the function anywhere else on your page. If you have bound it in the constructor, then you can simply call this.handleChange anywhere else on your page.

ShaneDaugherty · Accepted Answer · 2016-10-24 17:33:40Z

1

You have to bind this to your event handler like this:

<input type="text" onKeyUp={this.handleChange.bind(this)} />

Working Example: https://codepen.io/shanedaugherty/pen/ALwAzL

answered Oct 24, 2016 at 17:33

ShaneDaugherty

4274 silver badges7 bronze badges

1 Comment

Usama Over a year ago

Working example isn't opening.

Niraj Patel · Accepted Answer · 2020-01-22 07:03:35Z

1

this.handleChange = this.handleChange.bind(this); You can bind it like this in constructor and it will work, as you have to bind this to your react function.

answered Jan 22, 2020 at 7:03

Niraj Patel

8108 silver badges16 bronze badges

Comments

Ankit Kumar Rajpoot · Accepted Answer · 2020-11-11 06:26:06Z

0

You use value as an attribute.

value={this.state.text}

OR

answered Nov 11, 2020 at 6:26

Ankit Kumar Rajpoot

5,6542 gold badges41 silver badges33 bronze badges

Collectives™ on Stack Overflow

ReactJs print value of input field

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related