Communiquer entre composants en React

Un composant prend en paramètre des propriétés qui permettent au parent de descendre l’information, et des gestionnaires d’événements qui permettent aux enfants de remonter l’information lorsque des événements se produisent.

Descendre les informations du composant React parent au composant enfant

export default function App() {
  return (
    <>
      <Title color="#000000">Hello world</Title>
    </>
  );
}

function Title(props) {
  console.log(props);
}

L’élément enfant reçoit un paramètre props contenant toutes les données transférées du parent.

Dans cet exemple, props retournera {color: '#000000', children: 'Hello world'}.

La propriété children est transférée lorsqu'il s’agit d’une balise qui n’est pas auto-fermante, c’est-à-dire <Title></Title> au lieu de <Title />.

Pour extraire uniquement les valeurs qui vous intéressent :

export default function App() {
  return (
    <>
      <Title color="red" />
    </>
  );
}

function Title({ color }) {
  return <h1 style={{ color: color }}>Hello world</h1>;
}

Gestion des attributs sans valeur explicite :

Lorsque qu'un attribut ne possède pas de valeur explicite, comme dans <Title checked />, cela indique que l'attribut checked est présent sans valeur assignée.

En JavaScript, cela est interprété comme true. Ainsi, dans le composant enfant, la propriété checked sera égale à true si l'attribut est présent, et à undefined s'il ne l'est pas.

Remonter les informations du composant React enfant au composant parent

import { useState } from "react";

function CGUCheckbox({ checked, onCheck }) {
  return (
    <div>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onCheck(e.target.checked)}
      />
      <label>Accepter les conditions générales</label>
    </div>
  );
}

export default function App() {
  const [isCGUAccepted, setIsCGUAccepted] = useState(false);

  return (
    <>
      <CGUCheckbox checked={isCGUAccepted} onCheck={setIsCGUAccepted} />
    </>
  );
}

Lorsque la checkbox est cochée, onCheck est appelé avec une valeur true ou false en fonction de e.target.checked.

onCheck est lié à setIsCGUAccepted, permettant ainsi au composant enfant de modifier l’état du composant parent.