title: How to toggle the state of an item inside a map funtion
body: <p>I'm trying to make a tag selection, the problem is, I don't know how to make a state for each item in the map, right now I have just one state, that, of course, will change all items.</p>
  <p>That's the state and the function to toggle the state</p>
  <pre class="lang-js prettyprint-override"><code>const [selectedActivity, setSelectedActivity] = useState(false);
  
  const toggleSelectedActivity = () =&gt; {
    setSelectedActivity(!selectedActivity);
  };
  </code></pre>
  <p>and that's the map function</p>
  <pre class="lang-js prettyprint-override"><code>&lt;View style={styles.tags}&gt;
    {activitiesObject.map((data, i) =&gt; (
      &lt;TouchableOpacity
        key={data.activity}
        onPress={() =&gt; toggleSelectedActivity(i)}
      &gt;
        &lt;Text style={selectedActivity ? styles.selectedTag : styles.tagsText}&gt;
          {data.activity}
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    ))}
  &lt;/View&gt;;
  </code></pre>
  <p>the image below shows what I expect to happen every time the user selects a tag</p>
  <p><a href="https://i.stack.imgur.com/1sjhY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sjhY.png" alt="enter image description here" /></a></p>
  <p><strong>Here is the full code:</strong> <a href="https://snack.expo.io/KIiRsDPQv" rel="nofollow noreferrer">https://snack.expo.io/KIiRsDPQv</a></p>