Discussion :

[MInfo25]

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 :


Et voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[gwyohm]

Salut,
c'est parce que dans markDone, tu ne traites pas le cas où ton élément n'est pas celui cliqué (tu ne renvoies rien).
Comme tu ne renvoies rien, tu te retrouves avec des undefined à la place des éléments qui ne vérifient pas l'égalité, et du coup tu ne peux pas lire done de undefined.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
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
      })
    }
   return t;
  })
  this.setState({items: todos})  //setState met à jour l'etat local en remplaçant items par todos