Redux: Cannot read property 'id' of undefined - react-redux

Question

The code below works as intended unless clickable list item has been clicked. So, mapped id is fine when we add items and is undefined when the <li> is clicked.
Please, what's wrong with this pretty basic piece of code?
let nextId = 0;
export default React.createClass({
addItem(){
let text = ReactDOM.findDOMNode(this.refs.doos).value;
store.dispatch({
type: 'ADD_TODO',
text,
id: nextId++
})
ReactDOM.findDOMNode(this.refs.doos).value = '';
},
render(){
return <div>
<p>Toddos!</p>
<input ref="doos" type="text"/>
<button onClick={this.addItem}>Add Item</button>
<ul>
{this.props.todos.map(todo =>
<li key={todo.id} // Can not read property when clicked!
onClick={() => {
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
});
}}
style={{
textDecoration: todo.completed ?
'line-through' : 'none',
cursor: 'pointer'
}}>
{todo.text}
</li>
)}
</ul>
</div>
}
});

Answer 1

It has probably something to do with your reducers not returning state. In your reducer that maps over all todos, check if it returns your state for every todo.
What could be a possible problem is that you are using curly brackets in your map function for your todosReducer. However using curly brackets in ES6 means you should explicitely return values. Omitting the curly brackets automatically returns the value.
In your todosReducer:
case 'TOGGLE_TODO':
return state.map(todo => {
todoReducer(todo, action) // You should use return here
});
Or:
case 'TOGGLE_TODO':
return state.map(todo =>
todoReducer(todo, action) // Omitted curly brackets
);