[React] Composant qui modifie l'état d'un autre composant

Glim
Javascript

Bonjour,

Je teste des trucs avec les hooks, et j'essaie d'implémenter cela :

J'ai un composant App avec 4 boutons de couleur rouge. Lorsque l'on clique dessus, ils doivent devenir verts. Jusque là, tout fonctionne bien. Je voudrais à présent créer un nouveau bouton qui réinitialiserait la couleur des boutons dont la couleur est passée à "vert".

J'ai essayé plusieurs méthodes mais sans succès. Voici la version actuelle du code : 

import React, {useEffect, useState} from 'react';
import './App.css';

const App = () => {

  const [reset, setReset] = useState(false);

  const handleReset = () => {
    setReset(true);
  }

  return (
    <div>
      <Card id='1' reset={reset} />
      <Card id='2' reset={reset} />
      <Card id='3' reset={reset} />
      <Card id='4' reset={reset} />

      <ButtonReset reset={reset} onChange={handleReset} />
    </div>

  );
}

export default App;

const Card = (id, reset) => {

  const[color, setColor] = useState('red');

  useEffect(
    setColor('red'),
    [reset]
  );

  const handleClickCard = () => {
    setColor('green');
  }

  return (
  <button id={id} className={color} onClick={handleClickCard}>Réponse</button>
  );
}

function ButtonReset(props) {

  const handleClick = (event) => {
    props.onChange();
  }

  return(
    <button onClick={handleClick}>Suivant</button>
  );
}

Le bouton change l'état du composant parent qui le passe aux composants enfants. Le style dépend de la classe de l'élément qui dépend de "color". Actuellement, j'obtiens une erreur "Too many re-renders. React limits the number of renders to prevent an infinite loop".

J'ai aussi essayé de mettre une condition sur "reset" dans la classe, sans succès...

Je pensais que ça allait être un truc assez simple, qu'est-ce que je fais mal et comment bien faire ?

Aucune réponse