display items in a table using Reactjs

Question

I am a complete beginner in Reactjs.. this a simple todo-list app IN REACTJS i HAVE SOME DATA IN STATE.. i have review all code and tried to manipulate in different ways. but lastly i console log that function, but it returns UNDEFINED. Everything is functioning very well, but a function that should display the list of items returns UNDEFINED todoRows(), in app.js, returns undefined

import React from 'react';
import NavBar from './components/NavBar';
import TodoRows from './components/TodoRows';

// Class App
export default class App extends React.Component{
     state ={ userName:  'Kouhadi aboubakr',
              todoItems:[
                         {action:'swimming', done:true},
                         {action:'calling daddy', done:false},
                         {action:'playing football', done:false}
             ],
             newTodo:    '',
           };
           
 updateValue=(e)=>{
   this.setState({
     newTodo:e.target.value
   });
 };

 addNewTodo = (e)=>{
   this.setState({
     todoItems:[
       ...this.state.todoItems, 
       {action:this.state.newTodo, done:false},
     ]
   })
   // clear the fields
   this.setState({newTodo:''});
 };

 todoRows = ()=>{
   this.state.todoItems.map(item =>{
      return  <TodoRows key={item.action} item={item} callback={this.toggleDone}/>; 
 })
 };

 toggleDone = (todo)=>{
   this.setState({
     todoItems:this.state.todoItems.map(item =>{
      return item.action === todo.action ? {...item, done:!item.done} : item
     })
   });
 };

 render=()=>{
   return(
     <div className='container'>
       <div className='row'>

         <NavBar name={this.state.userName}/>

         <div className='col-12'>
             <input
                   className='form-control'
                   value={this.state.newTodo}
                   onChange={this.updateValue}
             />
           <button className="btn btn-danger" onClick={this.addNewTodo}>Add</button>
         </div>
         <div className="col-12">
           <table className="table">
             <thead>
               <tr>
                 <th>Task</th>
                 <th>Completed</th>
               </tr>
             </thead>
             <tbody>
               {this.todoRows()}
                { /* WHEN I CONSOLE IT, IT RETUNS UNDEFINED  */}
             </tbody>
           </table>
         </div>
       </div>
     </div>
   );
 }
}

import React from 'react';

export default class TodoRows extends React.Component{

    render = ()=>{
        return         <tr>
        <td>{this.props.item.action}</td>
        <td>
          <input 
            type="checkbox" 
            checked={this.props.item.done}
            onChange={()=> this.props.callback(this.props.item)}
          />
        </td>
    </tr>
    }
}

Answer 1

You try to call function without any DOM and Todos is not a State and also not a prop try this one inside render

 <tbody>{
  this.state.todoItems.map(item =>{
  return  <TodoRows key={item.action} item={item} callback={this.toggleDone}/>;
  }
 </tbody>