basculer l'état actif avec les crochets react

Question

J'utilise React hooks et j'ai rencontré quelque chose que je ne sais pas comment faire.

J'ai un composant parent qui affiche une liste de villes.

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
  return (
    <>
      {cities.map(city => {
        const [isActive, setActive] = useState(false);
        return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
      })}
    </>
  );
};

Le problème que je rencontre est que chaque fois que je clique sur une ville, elle devient red Cependant, je ne veux qu'une seule couleur rouge à la fois (celle sur laquelle on a cliqué le plus récemment).

Si cette question n'est pas claire, veuillez m'en informer.

Dans un composant de classe, je suppose que je ferais quelque chose de similaire à cette .

Voir le bac à sable aquí .

Answer 1

Si une seule ville peut être sélectionnée à la fois, il n'est pas nécessaire d'avoir une valeur d'état pour toutes les villes. Il suffit de conserver la ville sélectionnée dans un seul attribut state :

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York", "Wigan"] }) => {
    const [activeCity, setCity] = useState(null);

    return (
        <>
            {cities.map(city => <p key={city} onClick={() => { setCity(city) }} style={{ color: activeCity === city ? "red" : "green" }}>{city}</p>)}
        </>
    );
};

Answer 2

Si une seule ville peut être rouge, vous ne devriez pas utiliser le crochet à l'intérieur de la boucle (quelque chose que vous ne devriez jamais faire) mais garder un état actif unique au-dessus du rendu, quelque chose comme :

const App = ({ cities = ["London", "Manchester", "Leeds"] }) => {
  const [active, setActive] = useState(false)

  const City = ({ name }) => (
    <p
      onClick={ () => setActive(name) }
      style={{ color: active === name ? "red" : "green" }}
    >
      { name }
    </p>
  )

  return (
    <>
      { cities.map(city => <City name={ city } />) }
    </>
  );
};

Vous pouvez trouver ma boîte à codes fonctionnelle ici : https://codesandbox.io/s/o58342l64z

J'ai également pris la liberté de remanier un peu le texte pour des raisons de clarté personnelle.