Отрисовка React пуста

я новичок, чтобы реагировать. Я прочитал документацию и попытался исследовать свою проблему. мне любопытно, почему моя страница продолжает отображаться пустой и показывать только заголовок.

я убедился, что каждое имя класса является заглавным, я заметил во время исследования, что это распространенные ошибки новичков. это просто домашняя практика, мой профессор сделал это с es5, я думаю, и я хотел попробовать использовать es6 и лучше почувствовать реакцию. пожалуйста, дайте мне обратную связь, это поможет мне стать лучше Спасибо -

       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.info("editing");
            var copytask= this.state.objtasks;
            copytask[i]=newInfo;
            this.setState({arraytasks: copytask});

           }
           remove_task(i){
               console.info("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>