Как исправить 'TypeError: Невозможно прочитать свойство' map 'из undefined' в React

Question

Здравствуйте, я новичок в React и пытаюсь отобразить массив с именем Todo, который я создал в состоянии, однако я получаю сообщение об ошибке «Ошибка типа: невозможно прочитать свойство map of undefined». Подскажите, пожалуйста, где я поступил неправильно?

Вот мой код

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import Todos from './component/Todos.js';
import './App.css'

class App extends Component {
  state={
    todos:[
        {
            id: 1,
            title:'Star Wars',
            point:9,
            watched: true
        },
        {
            id: 2,
            title:'Into the Wild',
            point:null,
            watched: false
        },
        {
            id: 3,
            title:'Enter the Void',
            point:6,
            watched: true
        },
        {
            id: 4,
            title:'Tschick',
            point:7.5,
            watched: true
        }
    ]
  }
  render() {
    return (
      <div className="App">
       <Todos />
      </div>
    );
  }
}

export default App;

Todo.js

import React, { Component } from 'react';


class Todos extends Component {

  render() {

    return this.props.todos.map((todo) => (
        <div>
        <h3>{todo.title}</h3>
        </div>
    ));
  }
}


export default Todos;

Ошибка, которую я получаю

Answer 1

В вашем App.js вызовите задачи из состояния

<Todos todos={this.state.todos}/>

После этого все должно работать нормально

Answer 2

Вы не передаете переменную todos в свой компонент.

Вы должны передать в собственность, как это:

<Todos todos={this.state.todos} />