Can't access json values in react native

Question

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 :).

Muhammed Jaseem · Accepted Answer · 2021-12-18T23:56:08.513

1

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>
})}

edited Dec 18 '21 at 23:56

answered Dec 18 '21 at 23:45

Muhammed Jaseem

782
6
18

1

Couple of suggestions: 1. the state is `data`, not `responseJson`, 2. don't forget the `key` property on each ``. – tromgy Dec 18 '21 at 23:49
Thank you. Made those changes. – Muhammed Jaseem Dec 18 '21 at 23:50
I did what you said but then i get that error : typeerror: cannot read properties of undefined (reading 'map') because before doing data.map i have to do data.drinks.map. But if do data.map exactly like you i have this error : typeerror : data.map is not a function. – Ibrahim Dec 18 '21 at 23:54
Can you `console.log(responseJson)` and show that? – Muhammed Jaseem Dec 18 '21 at 23:59
When I do console.log(responseJson), first i have an empty array like that : [] and then i have automatically a second line like that : {drinks: Array(6)} (it's due to the useEffect() i suppose ) – Ibrahim Dec 19 '21 at 00:04
Oh ! No sorry i was not adding the part with "data &&" can you explain why do i have to add this ? – Ibrahim Dec 19 '21 at 00:10
Basically, it takes some time for the API call to return and set the value of the variable `data`. Until that happens it will be `undefined`. So we are checking if something is stored in `data` (or if it is not `undefined` or not `null`) by the statement `data &&`. – Muhammed Jaseem Dec 19 '21 at 00:12
`data &&` is similar to `if (data)` – Muhammed Jaseem Dec 19 '21 at 00:14
Thank you so much for your help ! I have on last question i just tried to add multiple Text tag in my return of map() but i had warning : Each child in a list should have a unique "key" prop. Do you know why do I have that ? – Ibrahim Dec 19 '21 at 00:18
https://stackoverflow.com/a/28329550/14555991 – Muhammed Jaseem Dec 19 '21 at 00:19
I think it'll be useless to open another subject for that, but there is a problem with the map() function with the Image tag. I have a property *strDrinkThumb* in my json, it's an url image, but when i do ``` data.drinks && data.drinks.map((element) => { return ``` My Image tag don't display anything. – Ibrahim Dec 19 '21 at 00:43
Not sure but try this: `source={require({element.strDrinkThumb})}` – Muhammed Jaseem Dec 19 '21 at 00:53
Unfortunately it doesn't work – Ibrahim Dec 19 '21 at 00:56
Oh i found the solution i just add style={{width: 400, height: 400}} and it worked perfectly. Thank you again sir. :) – Ibrahim Dec 19 '21 at 01:50

Can't access json values in react native

1 Answers1