Can't access json values in react native-CodePudding

I've been using React-native recently (it's my first time to be honest).

I'm retrieving values from an api and i'm trying to display them in a Text tag. But i don't know how to access these values.

So, this is my code :

export const Home = () => {
  
  const [data, setData] = useState([]);

  const getApiInformations = async () => {

    const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita');
    const responseJson = await response.json();
    setData(responseJson);
  }
  
  useEffect(() => {
    getApiInformations();
  }, []);
  
  return (
    <View>
        <Text>
            {
              I want to put the values here like : data.idDrink, data.OtherValue,...
            }
        </Text>
    </View>
  );
}

In {data.drinks} i have :

0: {idDrink: '11007', strDrink: 'Margarita', strDrinkAlternate: null, strTags: 'IBA,ContemporaryClassic', strVideo: null, …}
1: {idDrink: '11118', strDrink: 'Blue Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
2: {idDrink: '17216', strDrink: "Tommy's Margarita", strDrinkAlternate: null, strTags: 'IBA,NewEra', strVideo: null, …}
3: {idDrink: '16158', strDrink: 'Whitecap Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
4: {idDrink: '12322', strDrink: 'Strawberry Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
5: {idDrink: '178332', strDrink: 'Smashed Watermelon Margarita'

Thanks for your help :).

CodePudding user response：

You can make use of .map() functionality in javascript. For example:

{data && data.map((element) => {
    return <Text key={element.idDrink}>ID: {element.idDrink} Name: {element.strDrink}</Text>
})}