React, pure function warning?
<p>I am trying to learn react and functional programming by trying to implement a simple todo app. I am not using flux as I am just trying to see the concepts of passing information between parent and children. I am trying to trigger a function in the parent on a click event in the child. However, I get a very nasty error from React about using pure functions and state. Can someone explain what I am doing wrong and what may be the right way of doing things? What is impure about my functions, I don't see the side-effects I am creating. Here is my code:</p>

<pre><code>var React = require('react');
var Todo = require('./Todo');

const todos = [ {task: "Eat", completed: false},
            {task: "Breathe", completed: false},
            {task: "Sleep", completed: false}];

var TodoList = React.createClass({
    getInitialState: function() {
        return {todos: todos};
    },
    changeTodoStatus (task) {
        var updatedTodos = this.state.todos.map(function(todo){
            if (task.task === todo.task) {
                return {task: todo.task, completed: !todo.completed};
            } else {
                return todo;
            }
        });
        this.setState({todos: updatedTodos});
    },
    render: function() {
        var _that = this;
        return(
            &lt;div className="container"&gt;
                &lt;div className="row list-of-things"&gt;
                    &lt;ul className="list-group"&gt;
                        {
                          this.state.todos.map( (todo, index) =&gt; {
                                return (&lt;Todo clickHandler={ this.changeTodoStatus } key={index} todo={todo} /&gt;);
                            })
                        }
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
});

module.exports = TodoList;

var Todo = React.createClass({
    handleClick( todo ){
        this.props.clickHandler( todo );
    },
    render: function() {
        if( this.props.todo.completed === true){
            return ( &lt;li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item list-group-item-success"&gt;&lt;strike&gt;{this.props.todo.task}&lt;/strike&gt;&lt;/li&gt; );
        } else {
            return ( &lt;li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item"&gt; {this.props.todo.task} &lt;/li&gt; );
        }
    }
});

module.exports = Todo;
</code></pre>

<p>Any help/clarification is greatly appreciated!</p>

<p>This is the error: bundle.js:9139 Warning: setState(...): Cannot update during an existing state transition (such as within <code>render</code> or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to <code>componentWillMount</code>.</p>