javascript - How can I get an ID from a FlatList keyExtractor and use it in a modal?

Question

I'm trying to take an ID from a keyExtractor in a FlatList and give that ID to a modal so that it can show the information from the API. The current implementation throws a warning - "Cannot update a component from inside the function body of a different component." The problem is that I can't think of another way to update that modal.

Here's the relevant code:

    export default function AllList() {
  const [isLoading, setLoading] = useState(true);
  const [drinkData,setDrinkData] = useState([]);
  const [searchValue, onChangeText] = useState(''); //needed for search
  const [reloading, setReloading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false); //normal modal visibility handler
  const [idDrink, setIdDrink] = useState(0);

  const renderItem = ({ item }) => {
    setIdDrink(item.id);

    return (
      <RowCard id={item.idDrink} image={item.strDrinkThumb} title={item.strDrink} alcontent={item.strAlcoholic} 
        ingredient1={item.strIngredient1} ingredient2={item.strIngredient2} ingredient3={item.strIngredient3} setModalVisible={setModalVisible}
      />
    );
  };

  useEffect (() =>  { 
    fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' + searchValue)
      .then((response) => response.json())
      .then((json) => setDrinkData(json.drinks))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
      
  },[drinkData]);
  
  return (
    
    <View style = {styles.screen}>
      <View style = {styles.searchSection}>
        <TextInput 
          placeholder="Search Drinks..."  
          style={styles.input}
          onChangeText={text => onChangeText(text)}
          value={searchValue}/>
      </View>
      <FlatList
        data={drinkData}
        keyExtractor={({ idDrink }, index) => idDrink}
        removeClippedSubviews={true}
        initialNumToRender={5}
        renderItem={renderItem}
        extraData={reloading}
        
      />
      <DrinkPopup modalVisible={modalVisible} setModalVisible={setModalVisible} drinkID={idDrink}/>
      
    </View>
      
  );

};

Another user helped me get this far, but I'm on a time crunch and need to figure this out as soon as I can.

Answer 1

Can you try this

  keyExtractor={(item) => item. idDrink}

in flatlist drinkData is your array. so you have to pick the idDrink from every object.