Why is onClick undefined inside my checkbox?

Question

I'm using React.js and I'm creating a todo app.

The contents are roughly like this code.

class TodoValue extends React.Component{

  _onChange(){
    console.log("atacked");
  }

  render(){
    return(
        <List>
          {
            this.props.todos.map(function(todo, i){
              return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onChange.bind(this)} />} />
            })
          }
        </List>
    );
  }
}

Why can not I find the onChange function in checkbox?

Input and button to update information are omitted.

Possible duplicate of [Method inside anonymous function inside map is undefined](http://stackoverflow.com/questions/40076995/method-inside-anonymous-function-inside-map-is-undefined) — Andrew Li, Dec 19 '16 at 15:56

An Nguyen · Accepted Answer · 2016-12-22T15:00:06.213

0

Add a declaration into your constructor:

class TodoValue extends React.Component{
  constructor() {
    super()
    this._onChange = this._onChange.bind(this)
  }
  _onChange(){
    console.log("atacked");
  }

  render(){
    return(
        <List>
          {
            this.props.todos.map(function(todo, i){
              return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onChange.bind(this)} />} />
            })
          }
        </List>
    );
  }
}

Notice the added constructor.

You can take a look here for a deeper explanation.

edited Dec 22 '16 at 15:00

answered Dec 19 '16 at 16:03

An Nguyen

1,487
10
21

You need to add `super` to the `constructor` too – Paul Fitzgerald Dec 19 '16 at 16:04
As far as I know, you only need `super` if you need to use `props` inside `constructor` – An Nguyen Dec 19 '16 at 19:26

score 0 · Answer 2 · answered Dec 19 '16 at 16:07

One option would be to use an es6 arrow function

Checkbox onClick={()=> this._onChange.bind(this)}

Another approach would be to utilise React's built in constructor method. Here you should bind the _onChange method to the component.

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

Then you can use

Checkbox onClick={this._onChange}

Why is onClick undefined inside my checkbox?

2 Answers2