TypeError: Cannot read property 'map' of undefinedというエラーが出てしまいます。

ReactでTodoリストアプリを作っているのですが、タイトルのエラーが出てしまいます。
コードは下記の通りです。

todosに内容が入っているのが原因なのかなとも思ったのですが、何度確認してもどこが間違っているのかわかりません。
よろしくお願いします。

TodoApp.js

import React from 'react';
import AddTodo from './components/AddTodo';
import List from './components/List';

export default class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { id: 0, title: 'title0'},
        { id: 1, title: 'title1'},
        { id: 2, title: 'title2'},
        { id: 3, title: 'title3'},
      ],
      nextId: 0,
    }
  }

  render() {
    return(
      <div>
        <h2>TodoApp</h2>
        <AddTodo />
        <List todos={this.state.todos}/>
      </div>
    );
  }
}

AddTodo.js

import React from 'react';

export default class AddTodo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const list = this.props.todos.map(todo => {
      return (
        <li>#{todo.id} {todo.title}</li>
      );
    });
    return(
      <div>
        <h2>AddTodo</h2>
        <ul>{list}</ul>
      </div>
    );
  }
}