Le state en React

Le state

En React chaque composant a un état, qui peut changer. Cet état peut contenir de nombreuses informations, que ce soit des chaînes de caractères, des tableaux, des objets…

C'est vous qui définissez le state quand vous définissez votre composant, il devra contenir ce dont vous avez besoin pour faire fonctionner ce composant.

En React le state est en fait composé de deux choses : les données et la fonction pour le modifier :

{/*data et setData sont des noms d'exemples, vous pouvez les changer*/}
const [data, setData] = useState(0);

La fonction useState est une fonction fournie par React qui permet de créer un état. Elle prend en paramètre la valeur initiale de l'état et retourne un tableau avec deux éléments : la valeur de l'état et une fonction pour modifier cette valeur.

Pour pouvoir utiliser useState vous allez devoir l'importer en haut de votre composant :

import { useState } from 'react';

Exemple pratique

Imaginons que nous ayons un interrupteur, il peut soit être allumé, soit être éteint.

Nous allons donc mettre une valeur true ou false à son state (par défaut, nous allons dire qu'il est éteint):

{/* 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);

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

export default Switch;

Mais du coup comment je change le state ?

Pour pouvoir modifier le state, il nous faudrait un déclencheur, nous allons voir ça dans le prochain chapitre avec les events. Pour le moment faites varier le state directement dans votre code pour tester.

Est-ce que mon state peut prendre la valeur d'une prop ?

Oui, mais uniquement pour sa valeur initiale. Une prop ne peut pas être modifiée du coup au moment de l'appel au composant, il fera une copie de votre prop dans le state mais ensuite il vous faudra utiliser la fonction renvoyée par useState pour modifier le state.

Exemple de state qui prend la valeur d'une prop

Switch.jsx

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

const Switch = (props) => {
    {/* par défaut je récupère la valeur des props */}
    const [isOn, setIsOn] = useState(props.isOn);

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

export default Switch;

App.jsx

import Switch from './Switch.jsx';

function App() {

  return (
    <Switch isOn={true}/>
  )
}

29 January 2026