ReactでTodoを追加してもブラウザ上に表示されない。

前提・実現したいこと

React歴1か月未満の初心者です。今現在,ReactでTodoアプリを作っており、↓のようなtitleとdescriptionの入力画面で登録を押すと、背景が黄色の部分にタイトルと詳細が表示されるはずなのですが、表示されません。console.logでtodosのstateを出力させてみると、todos自体に入力したtitleとdescriptionのオブジェクトが格納されてないようです。

↓に関連するjsファイルを載せています。またディレクトリ構造としては↓のようになっています。検証画面で表示されている"[HMR]waiting for update signal from WDS・・ ←　これが原因ではないかと少し疑っていますがよくわかりません。もしわかる方がいれば教えてくださると大変ありがたいです。

![イメージ説12a79fb6f3411ca34c8d66293ae22.jpeg)

<AppTodo.js>(stateを管理してます)

import React from 'react';
import './Apptodo.css';
import ToDoListItem from './ToDoListItem';
import ToDoAddItem from './ToDoAddItem';
import ToDoDeleteItem from './ToDoDeleteItem';
import ToDoDoneItem from './ToDoDoneItem';
import ToDoCountItem from './ToDoCountItem';

class AppTodo extends React.Component{
    state = {
      todos:[],
      inputTitle:'',
      inputDescription:'',
      titlError:'',
      descriptionError:'',
      selectedIndex:-1,
      doneCount:0
    }

    titleHandle = (event) => {       //入力中のtitleをinputtitleにセット
      this.setState({
        inputTitle:event.target.value
      }
      )} 

     descriptionHandle = (event) => {         //入力中のdescriptionをinputdescriptionにセット
       this.setState({
         inputDescription:event.target.value
       })
     }

     todoAdd = ()=> {
       if(!this.state.inputTitle){
         this.setState({
           titleError:'タイトルを入力してください'
         })
       }else if(!this.state.inputDescription){
         this.setState({
           descriptionError:'内容を入力してください'
         })
       }else{
         return
       }

       const NewTodo = {
         title:this.state.inputTitle,
         description:this.state.inputDescription,
         createdAt:new Date(),
       }

       const todo = this.state.todos.slice();
       todo.push(NewTodo);
       
       this.setState({
         todos:todo,
         inputTitle:'',
         inputDescription:'',
         titleError:'',
         descriptionError:'',
       })
       }     

       todoSelect = (index) => {
           this.setState({
              selectedIndex:index,
           })
       }

       todoDelete = (index) => {
           const NewTodos = this.state.todos.slice();
           NewTodos.splice(index,1);
           this.setState({
             todos:NewTodos
           })
       }

       todoDone = (index) => {
             const NewTodos = this.state.todos.slice();
             NewTodos.splice(index,1);
             this.setState({
               todos:NewTodos,
               doneCount:this.doneCount+1      //完了回数をカウントする
             })
       }

       render(){
         return(
          <div className="AppTodoAll">                
              <div className="AppTodoAdd">          
                  <ToDoAddItem  {...this.state} titleHandle={this.titleHandle} descriptionHandle={this.descriptionHandle} todoAdd={this.todoAdd}/>                    
              </div>
              <br></br>
              <div className="AppTodoList">
                 <ToDoListItem {...this.state} todoSelect={this.todoSelect} />                   
              </div>
              <br></br>
              <div className="AppTodoDone">
                <ToDoDoneItem {...this.state} />　　　　　　　　　　　　 
              </div>
              <div className="AppTodoDelete">
                <ToDoDeleteItem {...this.state} />                     
              </div>
              <div className="AppTodoCount">
                <ToDoCountItem {...this.state}/>                      
              </div>
           </div>   
         )
       }
}

export default AppTodo

<ToDoAdd.js>(titleとdescriptionの追加を担当)

import React from 'react';

class ToDoAddItem extends React.Component{
      render(){
        console.log(this.props.inputDescription);
          return(
              <div className="ToDoAdd">
                <form className="ToDoAdd-form">
                  <div>
                    <input onChange ={this.props.titleHandle} value={this.props.inputTitle} placeholder="title"  />
                    {this.props.titleError}{this.props.descriptionError}
                    <textarea onChange={this.props.descriptionHandle} value={this.props.inputDescription} placeholder="description"/>
                      <button onClick={this.props.todoAdd}>登録</button>
                  </div>
                </form>
              </div>
          )}
}

export default ToDoAddItem

<ToDoListItem.js> 
import React from 'react';         
import './ToDoListItem.css';      

class ToDoListItem extends React.Component{
   render(){
       console.log(this.props.todos);
     return(                  
        <div className="ToDoListItem">                                                    
          {this.props.todos.map( (todo,index) => {                       
                return(
                    <div className="ToDoListContent">
                    <input type="radio" onClick = { () => this.props.todoSelect(index)} /> 
                    <p>{todo.title}</p>
                    <p>{todo.description}</p>
                    <p>{todo.createdAt.toDateString()}</p>
                    </div>
                )    
          })}
          </div>                                                                       
     )
   }
}

export default ToDoListItem