React, pure function warning?

Question

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:

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(
            <div className="container">
                <div className="row list-of-things">
                    <ul className="list-group">
                        {
                          this.state.todos.map( (todo, index) => {
                                return (<Todo clickHandler={ this.changeTodoStatus } key={index} todo={todo} />);
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
});

module.exports = TodoList;

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

module.exports = Todo;

Any help/clarification is greatly appreciated!

This is the error: bundle.js:9139 Warning: setState(...): Cannot update during an existing state transition (such as within render 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 componentWillMount.

score 2 · Accepted Answer · answered Sep 22 '16 at 04:22

in your onclick handlers for todo, you are actually calling those functions instead of referencing. What i would do is inside of your Todo component:

handleClick() {
  this.props.clickHandler( this.props.todo );
{

and in your render just do

render: function() {
    if( this.props.todo.completed === true){
        return ( <li onClick={ this.handleClick } className="list-group-item list-group-item-success"><strike>{this.props.todo.task}</strike></li> );
    } else {
        return ( <li onClick={ this.handleClick } className="list-group-item"> {this.props.todo.task} </li> );
    }
}

the way you have it now you are actually calling this.handleClick(this.props.todo) so as soon as the component renders it calls that function which is setting state immediately in the parent component which is against the react pattern AKA you don't set state in the render method

Ahhh, that makes because I am creating a side effect by calling instead of referencing, is that correct? — hackrnaut, Sep 22 '16 at 04:30
With how it was done originally you are basically saying "run this function as soon as you render" when what you want is "I want this function to be ran when an on clock is oerformed" anytime you add the parenthesis you are saying you want the actual value of the function aka execute the function vs referencing the function itself — finalfreq, Sep 22 '16 at 04:39

React, pure function warning?

1 Answers1