Les events en React

Modifier le state

Une chose à retenir c'est qu'en React, dès que le state d'un composant est modifié ce composant est rechargé.

Quand vous allez appeler la méthode de modification du state vous allez donc automatiquement déclencher un rechargement du composant concerné.

Pour modifier le state, vous allez devoir utiliser la fonction dont vous avez défini le nom en appelant useState:

const [data, setData] = useState(0);
{/* Ici ma fonction s'appelera setData */}

Modifier un state simple

Si votre state contient des données simples (Number, String, booléen), alors l'appel de la fonction est très simple : vous lui passez simplement la nouvelle valeur :

Number

const [data, setData] = useState(0);

{/* ... */}
setData(42);
{/* ... */}

String

const [data, setData] = useState("on");

{/* ... */}
setData("off");
{/* ... */}

booléen

const [data, setData] = useState(false);

{/* ... */}
setData(true);
{/* ... */}

Modifier un state complexe

Là où cela peut devenir plus compliqué c'est quand votre state est déjà une structure de donnée complexe, comme un objet.

Modifier l'objet complet

Si vous voulez changer tout l'objet, c'est assez simple : vous passez simplement le nouvel objet à votre fonction :

const [data, setData] = useState({ firstName: "Mari", lastName: "Doucet" });

{/* ... */}
setData({firstName: "Hugues", lastName: "Froger"});
{/* ... */}

Modifier une partie de l'objet

Si vous ne voulez modifier qu'une partie de l'objet, vous allez devoir utiliser une fonction fournie par JavaScript : Object.assign.

Cette fonction permet de faire d'un objet dans un autre sans l'écraser.

let user = { firstName: "Mari", lastName: "Doucet", dateOfBirth: "unknown" };
let moreInfos = { dateOfBirth: "01/01/1900" };

let completeUser = Object.assign(user, moreInfos);
/*
* completeUser contiendra :
* { firstName: "Mari", lastName: "Doucet", dateOfBirth: "01/01/1900"}
*/

donc appliqué à notre setData ça donne :

const [data, setData] = useState({ firstName: "Mari", lastName: "Doucet" });

{/* ... */}
let newState = Object.assign(data, { dateOfBirth: "01/01/1900" })
setData(newState);
{/* ... */}

Les events

Maintenant que vous savez modifier le state d'un composant, il nous faut un moyen de déclencher cette modification, pour cela nous allons utiliser les events.

Le principe de fonctionnement des events en React est très similaire au JS, la seule chose qui change c'est la façon d'attacher l'Event Listener. En effet, en React nous n'avons pas d'accès au DOM, nous ne pouvons donc pas faire un querySelector suivi d'un addEvent Listener. Nous allons donc rajouter l'event directement dans le HTML que nous générons :

<button onClick={maFonction}>Cliquez ici</button>

L'interrupteur mais avec un Event

{/* j'importe useState */}
import { useState } from 'react';

const Switch = (props) => {
    {/* par défaut l'interrupteur est éteint : isOn est false */}
    const [isOn, setIsOn] = useState(false);

    {/* je définis la fonction appellée par l'event */}
    function switchButton()
    {
        if(isOn === true)
        {
            setIsOn(false);
        }
        else
        {
            setIsOn(true);
        }
    }

    {/* is isOn est true */}
    if(isOn === true)
    {
        return(
            <>
                <p>L'interrupteur est allumé</p>
                <button onClick={switchButton}>Cliquez ici</button>
            </>
        )
    }
    else {/* is isOn est false */}
    {
        return (
            <>
                <p>L'interrupteur est éteint</p>
                <button onClick={switchButton}>Cliquez ici</button>
            </>
        )
    }
}

export default Switch;

29 January 2026