title: toggle active state with hooks react
body: <p>I am using React hooks and have come across something that I am unsure how to do.</p>
  
  <p>I have a parent component that renders a list of cities.</p>
  
  <pre><code>const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) =&gt; {
    return (
      &lt;&gt;
        {cities.map(city =&gt; {
          const [isActive, setActive] = useState(false);
          return &lt;p onClick={() =&gt; setActive(true)} style={{ color: isActive ? "red" : "green" }}&gt;{city}&lt;/p&gt;;
        })}
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>the problem I am having is that every time I click on a city it turns <code>red</code>, however I only want one to be red at any one time (i.e. the most recently clicked one).</p>
  
  <p>If anything is unclear with this question please let me know.</p>
  
  <p>In a class component I guess I would potentially do something similar to <a href="https://stackoverflow.com/questions/42630473/react-toggle-class-onclick">this</a>.</p>
  
  <p>See code sandbox <a href="https://codesandbox.io/s/pw11vw8vvm" rel="nofollow noreferrer">here</a>.</p>