javascript - How to toggle the state of an item inside a map funtion

Question

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.

That's the state and the function to toggle the state

const [selectedActivity, setSelectedActivity] = useState(false);

const toggleSelectedActivity = () => {
  setSelectedActivity(!selectedActivity);
};

and that's the map function

<View style={styles.tags}>
  {activitiesObject.map((data, i) => (
    <TouchableOpacity
      key={data.activity}
      onPress={() => toggleSelectedActivity(i)}
    >
      <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>
        {data.activity}
      </Text>
    </TouchableOpacity>
  ))}
</View>;

the image below shows what I expect to happen every time the user selects a tag

Here is the full code: https://snack.expo.io/KIiRsDPQv

Answer 1

You can do one of following options

1. change state to an array

const [selectedActivity, setSelectedActivity] = useState(Array.from({ length: activitiesObject.length }, _ => false))

const toggleSelectedActivity = (index) => 
        setSelectedActivity(prev => prev.map((bool, i) => i == index ? !bool : bool))

while passing the index to function, and use selectedActivity[i] ? ...

2. extract

 <TouchableOpacity key={data.activity} onPress={() => toggleSelectedActivity(i)}>
          <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>{data.activity}</Text>
 </TouchableOpacity>

to its own component, and inside it declare the state

{activitiesObject.map((data, i) => <MyComp data={data} i={i} />

const MyComp = ({ data, i }) => {
  const [selectedActivity, setSelectedActivity] = useState(false)
  return  <TouchableOpacity key={data.activity} onPress={() => setSelectedActivity(prev => !prev)}>
            <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>{data.activity}</Text>
          </TouchableOpacity> 
}