Erreur: Cannot read property 'done' of undefined

Bonjour
Je démarre sur React et je rencontre une erreur que je ne comprend pas, pourtant mon code a l'air bon. Merci de m'aider.
Voici l'erreur :
Pièce jointe 561914

Et voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
import React from 'react';
import logo from './logo.svg';
import './App.css';
 
 
class App extends React.Component {
  constructor(props){
      super(props)
      this.state = {
        heading: "Liste de courses",
        items: 
             [
               {text: "Déposer les enfants à l'école", done: false },
               {text: "Faire les courses", done: false },
               {text: "Faire du vélo", done: false },
               {text: "Passer à la pharmacie", done: false }
             ]
           }
  }
markDone = (todo) => {
  let todos = this.state.items.map(t => {
    if(t.text == todo.text) {
      return Object.assign({}, t, { //Object.assign clone l'objet t
        done: !t.done
      })
    }
  })
  this.setState({items: todos})  //setState met à jour l'etat local en remplaçant items par todos
}
  render() {
    return (
        <div className="container">
        <br />
         <div className="row">
             <div className="col-md-6 offset-3">
          <h1>{this.state.heading}</h1>
          <ul>
            {this.state.items.map(item => {return(<li className={ item.done ? "done" : ""} onClick={() => this.markDone(item)} key={item.text}>{item.text}</li>)})}
          </ul>
             </div>
        </div>
        </div>
 
    )
 
 
}
 
 
}
 
 
export default App;