React rendering empty

Question

i am new to react. I read documentation and tried to research my problem. i am curious why my page keeps rendering empty and only showing header.

i made sure that each class name is capital, i noticed while researching, those are common noobie mistakes. this is just homework practice, my professor did it with es5 i believe, and i wanted to try to use es6 and get a better feel with react. please give me feedback, will help me improve thank you -

       class ToDo extends React.Component {
           constructor(props) {
           super(props);
           this.state= {task:false};
       }
           edit(){
            this.setState({editing:true});
            alert("edit course");
        }
           remove(){
            alert("remove course");
            this.props.removeProperty(this.props.index);
        }
           saveTask(){
            this.setState({editing:false})
            alert("save task");
            // alert(this.refs.teacher.value);
            var mytask = {task:"XXX"};
            mytask.task = this.refs.task.value;
            this.props.editProperty(this.props.index, mytask);
           }
           render(){
               if(this.state.editing){ 
            return(
            <div>  
                   <span className="fixed">{this.props.task}</span><br/>
                   <input type="button" value="Save" onClick={this.saveTask} />
            </div>                  
               )
           }else{
               return(
               <div>
                   <span className="fixed">{this.props.task}</span><br/>
                   <button onClick={this.edit.bind(this)}>Edit Task</button><br/>
                   <button onClick={this.remove.bind(this)}>Remove Task</button><br/>
                   <button onClick={this.promote.bind(this)}>Promote Task</button><br/>
                   <button onClick={this.demote.bind(this)}>Demote Task</button><br/>
               </div>
               )}   
           }
       };//end of this class

       class MyList extends React.Component{
           constructor(props) {
               super(props);
               this.state=  {arraytasks: [
            {task: "Wake up"},
            {task: "Eat breakfast"},
            {task: "Go to class"}
               ]};

           this.remove_task = this.remove_task.bind(this);
           this.edit_task = this.edit_task.bind(this);
           this.promote = this.promote.bind(this);
           this.demote = this.demote.bind(this);
           this.eachtask = this.eachtask.bind(this);
           //remember to bind

           }
           edit_task(item,i){
               console.log("editing");
            var copytask= this.state.objtasks;
            copytask[i]=newInfo;
            this.setState({arraytasks: copytask});

           }
           remove_task(i){
               console.log("removing");
               var copytask= this.state.arraytasks;
               copytask.splice(i,1);
               this.setState({arraytasks: copytask});
           }
           promote(){

           }
           demote(){

           }
           eachtask(item,i){
               <div>
               <ToDo key={i} index={i} 
                       task= {item.task}
                       removeProperty={this.remove_task}
                       editProperty={this.edit_task}/>
               </div>
           }


           render(){
               return(
                   <div>
                       {this.state.arraytasks.map(this.eachtask)}
                   </div>
               )
           }
       };



    // call the render method  -- only one parent can be rendered -- so add surrounding div
    ReactDOM.render(<div><MyList/></div>, document.getElementById('divTarget'));


    </script>

Answer 1

You don't return anything in eachtask try:

...
eachtask(item, i) {
    return (
        <div>
            <ToDo key={i} index={i}
                task={item.task}
                removeProperty={this.remove_task}
                editProperty={this.edit_task} />
        </div>
    )
}
...