CODEWITHSUNDEEP
react-nativevariableshook
Kelvin Aitken
Kelvin Aitken

Reputation: 443

How to change state with useState hook using a variable

I have a FlatList with about 60 items. Each item has a small button that is clicked to display more information inside the FlatList item.

   <View style={styles.infoIcon} >
        <TouchableOpacity onPress={() => { toggleInfo() }} >
          <Ionicons name="ios-information-circle" size={40} color={"#0ca9dd"} />
        </TouchableOpacity >
      </View>

  {showInfo ? <View><Text>{ itemData.item.info }</Text><View> : null }

The onPress toggle function is something like:

  const toggleInfo = () => {
    if (showInfo === true) {
      setShowInfo(false);
   } else {
      setShowInfo(true);
   }
 };

Of course, since it's a FlatList, when I click the button all of the FlatList items show their hidden contents. But I only want the info for the clicked item to show, leaving all the others unchanged.

So, I changed the onPress to take an argument:

 <TouchableOpacity onPress={() => { toggleInfo(itemData.item.id) }} >

...which is fine. But now I need to target the right state array (which is the same as the id but with an "z" tacked on the end to avoid any variable conflicts):

  const toggleInfo =(id) => { // id might be "ABC"
const infoState = `${id}z`;
const infoStateSET = `set${speciesState}`; // therefore: setABCz
// Now I want to target the state "ABCz" and "setABCz" useState variables
if (infoState === true) {
  infoStateSET(false);
} else {
  infoStateSET(true);
}

};

Now, obviously there is no literal "infoStateSET" to change the state but I do want to use the variable to target the set state function.

Is this possible?

Upvotes: 0

Views: 390

Answers (1)

fayeed
fayeed

Reputation: 2485

You can just set the id in showInfo state and then check if showInfo id is the same as the itemData.item.id.

basically you would have a state like this.

const [showInfo, setShowInfo] = useState(null);

Then you would set the state like so using your toggleInfo function:

const toggleInfo = (id) => {
  if (showInfo === id) {
    setShowInfo(id);
  } else {
    setShowInfo(null);
  }
}

Then in your Flatlist item:

<View style={styles.infoIcon} >
  <TouchableOpacity onPress={() => { toggleInfo(itemData.item.id) }} >
    <Ionicons name="ios-information-circle" size={40} color={"#0ca9dd"} />
  </TouchableOpacity >
</View>

{showInfo === itemData.item.id ? <View><Text>{ itemData.item.info }</Text><View> : null }

Upvotes: 1

Related Questions