Répondre aux événements, gérer le state et alimenter des listes

Dans ce chapitre, vous apprendrez :

• comment répondre à des événements avec React.JS
• comment gérer un état (state) local aux composants
• transmettre des données et fonctions entre composants grâce aux "props
• alimenter des listes de composants

Capter un événement avec React.JS

Pour répondre à un événement en React.JS il suffit de placer un attribut portant le nom de l'événement sur la balise concernée et de le lier à une fonction écrite entre accolades comme ceci :

<button onClick={alert}>Alert</button>

Sous cette forme, il n'est pas possible de passer des arguments à la fonction. C'est pourquoi on utilise souvent les fonctions fléchées de cette manière :

<button onClick={ () => { alert('coucou') } }>Dire "coucou"</button>

⚠️ Les événements proviennent du DOM, seules les balises HTML peuvent en émettre. Si vous souhaitez ajouter des événements à vos propres composants, il vous faudra les associer à une balise présente dans le composant.

Gérer un état local (state)

React propose un "hook" permettant de gérer facilement des variables d'état.

Ces variables sont caractérisées par le fait que leur mise à jour déclenche le rafraichissement de l'interface graphique.

Créer une variable dans le state

On crée une variable d'état grâce à la méthode "useState" de React de cette manière :

const [todo, setTodo] = useState("");

La méthode "useState" prend en argument la valeur (ou le tableau/objet) que nous souhaitons attribuer à la variable.

Elle retourne un tableau dont les indexes contiennent les données suivantes :

• 0 : La valeur de la variable
• 1 : une fonction de mise à jour

💡 Pour simplifier le code, on utilise, encore une fois, la déstructuration comme dans l'exemple ci-dessus.

Mettre à jour une variable du state

La mise à jour d'une variable du state doit toujours être réalisée en appelant la fonction retournée par "useState". Dans le cas de notre exemple précédent, cela donnerait :

setTodo("Nouvelle valeur");

Alimenter des listes de composants

Notre application a besoin d'afficher autant de balises <li> qu'il y a de tâches dans notre tableau.

Cela est très facile à réaliser en React.JS avec la méthode "map" des tableaux (documentation de map : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

La méthode "map" prend en argument une fonction qui est appelée pour chaque entrée du tableau sur lequel elle est appliquée. Dans le cas de React.JS, cette méthode permet de retourner un bloc de JSX pour chaque entrée.

⚠️ Chaque composant/balise retournée par la méthode "map" doit être identifié(e) par une clé unique (attribut "key"). Si vos données ne possèdent pas d'identifiant, il est possible d'utiliser l'index du tableau en ajoutant un second argument à la fonction.

const List = ({todos, toggleDone, deleteTodo}) => { 

    return (
        <ul>
            { todos.map((todo, index) => { return (
            <li key={index}>
                <i className="far fa-2x fa-square"></i>
                <span>{todo.description}</span>
                <button><i className="fas fa-trash fa-2x"></i></button>
            </li>
            ) }) }
        </ul>        
    )
}

export default List