Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

Question

I am trying to create a simple a TODO list app in ReactJS. My basics of React are not very clear so I am stuck here.

相关标签:

Answer 1

you can go with Alex Solution but you can also achieve the same thing by changing only two place like

var that=this;
var createItem = function(item) {
      return <li key={item.id}>{item.text}<input type="checkbox" onChange={that.Checked} /></li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;

Answer 2

You need set this for .map (you can do that through second argument in .map)

return <ul>{this.props.items.map(createItem, this)}</ul>;

Example

because now in createItem this refers to global (in browsers it will be window) score (or if you use strict mode this will be undefined)

as you use babel you also can use arrow functions

var createItem = (item) => {
  return <li key={item.id}>
    {item.text}<input type="checkbox" onChange={this.Checked} />
  </li>;
};

return <ul>{this.props.items.map(createItem)}</ul>;

Example

Answer 3

Make createItem a method of TodoList class. The "this" reference is not being resolved as right now its a local function of render method. On a side note, React follows camel casing for handlers. Please rename the Clicked method to onChange, onChecked or onCheckClicked.