React onClick function fires on render

Question

I pass 2 values to a child component:

1. List of objects to display
2. delete function.

I use a .map() function to display my list of objects(like in the example given in react tutorial page), but the button in that component fires the onClick function, on render(it should not fire on render time). My code looks like this:

module.exports = React.createClass({     render: function(){         var taskNodes = this.props.todoTasks.map(function(todo){             return (                 <div>                     {todo.task}                     <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>                 </div>             );         }, this);         return (             <div className="todo-task-list">                 {taskNodes}             </div>         );     } }); 

My question is: why does onClick function fire on render and how to make it not to?

Answer 1

Because you are calling that function instead of passing the function to onClick, change that line to this:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button> 

=> called Arrow Function, which was introduced in ES6, and will be supported on React 0.13.3 or upper.

Answer 2

Instead of calling the function, bind the value to the function:

this.props.removeTaskFunction.bind(this, todo) 

MDN ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind