human
Est-il possible de mettre à jour les propriétés d'un objet avec ```setState``` ?
Quelque chose comme ça:
```this.state = {
   jasper: { name: 'jasper', age: 28 },
}
```
J'ai essayé:
```this.setState({jasper.name: 'someOtherName'});
```
et ça:
```this.setState({jasper: {name: 'someothername'}})
```
Le premier donne une erreur de syntaxe et le deuxième ne fait rien. Des idées
gpt
Il existe plusieurs façons de le faire, étant donné que la mise à jour de l'état est une opération asynchrone, nous devons utiliser une fonction de mise à jour avec ```setState``` pour mettre à jour l'objet d'état.
1- La plus simple:
D'abord, créez une copie de ```jasper``` puis effectuez les modifications dessus:
```this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);  // création d'une copie de la variable d'état jasper
  jasper.name = 'someothername';                     // mise à jour de la propriété name, assignation d'une nouvelle valeur
  return { jasper };                                 // retourne le nouvel objet jasper
})
```
Au lieu d'utiliser ```Object.assign```, nous pouvons également l'écrire comme ceci:
```let jasper = { ...prevState.jasper };
```
2- Utilisation de la syntaxe de propagation:
```this.setState(prevState => ({
    jasper: {                   // objet que nous voulons mettre à jour
        ...prevState.jasper,    // conserver toutes les autres paires clé-valeur
        name: 'something'       // mise à jour de la valeur d'une clé spécifique
    }
}))
```
Remarque: ```Object.assign``` et ```l'opérateur de propagation``` créent uniquement une copie superficielle, donc si vous avez défini un objet imbriqué ou un tableau d'objets, vous avez besoin d'une approche différente.

Mise à jour d'un objet d'état imbriqué:
Supposons que vous ayez défini l'état comme suit:
```this.state = {
  food: {
    sandwich: {
      capsicum: true,
      crackers: true,
      mayonnaise: true
    },
    pizza: {
      jalapeno: true,
      extraCheese: false
    }
  }
}
```
Pour mettre à jour extraCheese de l'objet pizza:
```this.setState(prevState => ({
  food: {
    ...prevState.food,           // copier toutes les autres paires clé-valeur de l'objet food
    pizza: {                     // objet spécifique de l'objet food
      ...prevState.food.pizza,   // copier toutes les paires clé-valeur de pizza
      extraCheese: true          // mise à jour de la valeur d'une clé spécifique
    }
  }
}))
```
Mise à jour d'un tableau d'objets:
Supposons que vous ayez une application de liste de tâches et que vous gérez les données de cette manière:
```this.state = {
  todoItems: [
    {
      name: 'Apprendre les bases de React',
      status: 'en attente'
    }, {
      name: 'Vérifier le code source',
      status: 'en attente'
    }
  ]
}
```
Pour mettre à jour le statut de n'importe quel objet de tâche, exécutez une boucle sur le tableau et vérifiez une valeur unique de chaque objet, en cas de ```condition=true```, retournez le nouvel objet avec la valeur mise à jour, sinon le même objet.
```let key = 2;
this.setState(prevState => ({
  todoItems: prevState.todoItems.map(
    el => el.key === key ? { ...el, status: 'terminé' }: el
  )
}))
```
Suggestion: Si l'objet n'a pas de valeur unique, utilisez l'index du tableau.