Sommaire

Conserver un état local dans le composant État:local State:local

Jusqu’alors, nous n’avons fait qu’afficher des données statiques : notre liste de tâches, définie dans le composant App. Bien évidemment, l’idée est de pouvoir modifier ces données, en ajoutant, modifiant et supprimant des tâches. Pour cela, il n’est pas possible de garder le tableau de tâches dans son état actuel, c’est-à-dire déclaré dans la fonction App :

const App = () => { 
 const tasks = [ 
   { id: 1, label: ’Acheter du lait’, isDone: true }, 
   { id: 2, label: ’Prendre des vacances’, isDone: false } 
 ] 
 return // ...

Nous allons devoir transformer un peu notre composant. Nous avons vu dans le premier exemple que la manière la plus simple de définir un composant est de le faire avec une fonction, qui prend en paramètres les propriétés passées au composant.

Mais React nous donne un deuxième moyen de le faire : passer par une classe, héritant de la classe Component, déclarée dans le package react. Component

Voyons à quoi ressemble notre composant sous forme de classe :

// src/App.js 
 
// Penser à importer la classe Component. 
import React, { Component } from ’react’ 
import TaskList from ’./TaskList’ 
 
class App extends Component { 
 render() ...