javascript - React.js: Uncaught TypeError: Cannot read property 'tasks' of undefined -

first time using react.js. building todo app react.js front end , rails backend. tasks.js.jsx file:

"use strict";  var list = react.createclass({     renderitems: function() {         return _.map(this.props.tasks, function(task) {             return <li classname="list-group-item pointer" >{task.name}</li>;         });     },      render: function() {       return  <ul classname="list-group">                 {this.renderitems()}               </ul>;     } });  var tasks = react.createclass({    getinitialstate: function(){     return {       tasks: this.props.data     }   },    getdefaultprops: function(){     return {       tasks: []     }   },    renderlist: function(complete){     return <list tasks={_.filter(this.state.tasks, function(x) { return x.complete === complete; })} />;   },    render: function() {     return  <div classname="todos">               <div classname="incomplete-todo">                 <h1>todo list</h1>                 <h2 classname="spacing-bottom">incomplete</h2>                 {this.renderlist(false)}               </div>               <div classname="complete-todo">                 <h2 classname="spacing-bottom">complete</h2>                 {this.renderlist(true)}               </div>             </div>   } });  $(document).ready(function () {   react.render(<tasks data={this.props.tasks}/>, document.getelementbyid('tasks')); }) 

views/tasks/index.html.erb

<div id="tasks">   <%= react_component 'tasks', { data: @tasks } %> </div> 

controller/tasks_controller.rb

class taskscontroller < applicationcontroller   def index     @tasks = task.all   end end 

although code renders list of tasks passed in rails. uncaught typeerror: cannot read property 'tasks' of undefined on <tasks data={this.props.tasks}/> , don't know why. on other hand if remove data={this.props.tasks} this.props undefined in of functions. have function componentwillmount? if so, how call function before render?

so problem was rendering twice:

$(document).ready(function () {   react.render(<tasks data={this.props.tasks}/>, document.getelementbyid('tasks')); }); 

i didn't need @ all. seems <%= react_component 'tasks', { data: @tasks } %> in index.html.erb file calls render. time consuming lesson learn.