this object in React Component using ES6 classes

Question

I have a MsgInput component with a textarea which onKeyUp triggers a handler function. Inside the handler function, I try reading the props using this.props, but not sure why props is undefined here. Ofcourse the workaroud is to use this.handler.bind(this).

export class MsgInput extends React.Component {
  constructor(props) {
        super(props);
  }

  inputHandler(e) {
    if(e.keyCode == 13 && !e.shiftKey) {
      this.props.onNewMessage({content: e.target.value});
      e.target.value = '';
      e.preventDefault();
    }
  }

  render() {
    return (
        <div className="controls">
            <textarea onKeyDown={this.inputHandler.bind(this)} className="msg-input" placeholder="Write something" disabled={!this.props.auth}></textarea>
        </div>
    );
  }
}

Possible duplicate of Undefined is not an object evaluating this.state/this.props — Pineda
– Pineda, Commented Dec 1, 2016 at 12:36
If you are using a transform anyways, check out the @autobind decorator: npmjs.com/package/core-decorators#autobind — Balázs Édes
– Balázs Édes, Commented Dec 1, 2016 at 12:37

Lyubomir · Accepted Answer · 2016-12-01 14:39:46Z

3

React with ES6 classes doesn't auto bind your callbacks to the component instance, so you have to do it yourself as you already did. Otherwise this would not available in the callback.

this.inputHandler.bind(this)

This is not a work around, but the way it is supposed to be.

Another alternative is to utilise ES6 arrow functions which would automatically bind this.

<textarea onKeyDown={(e) => this.inputHandler(e)}></textarea>

Caveat: Using .bind or arrow function inside your jsx will create a new function on every render which is a performance impediment.

As a last resort you can bind methods in your constructor which wouldn't have the performance penalty of arrow functions.

constructor(props) {
    super(props);
    this.inputHandler = this.inputHandler.bind(this);
}

edited Dec 1, 2016 at 14:39

answered Dec 1, 2016 at 12:30

Lyubomir

20.1k6 gold badges59 silver badges71 bronze badges

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

4 Comments

ffff Over a year ago

plus one for arrow functions. the calling of bind seemed tedious to me

Lyubomir Over a year ago

nice, thanks;-) you can accept the answer if it clears things up.

yadhu Over a year ago

Why create a new function on every render? I'd rather .bind inside the constructor.

Lyubomir Over a year ago

yeah, that's another point. Functional callback is created every time on redner.

Collectives™ on Stack Overflow

this object in React Component using ES6 classes

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related