How do I use fetched data in the return / jsx part of my React component? [duplicate]

Question

I am trying to fetch data but its always undefined once it gets to my return.. which makes sense because I am no longer using .then at that point. React doesnt seem to let me make the function Async so I cant really use await either? I tried setting it with useState but its still undefined where I need to use the data.

    const [myData,setData] = useState('')
useEffect(() => {
    fetch('https://recipesapi2.p.rapidapi.com/recipes/tomato%20soup', options)
      .then((data) => data.json())
      .then((data) => {
        setData(data.data); console.log('this is my data', data.data)
       })
      .then(()=>console.log(myData))
  },[])   
  
  return(
    <div>{myData[0].name}</div>
  )  }

I would also like to note that if I remove the return, and then wait for the page to respond with the data in the log, then add the return info back, it displays the div info properly. However, if i hard refresh the browser it runs nothing, not even my console logs. So that tells me I am inputting the proper code to populate the div but its not awaiting the fetch and just throwing errors.

Where you have setData(data.data), make it setData(data.data); console.log('this is my data', data.data); so you can debug it. And let us know what it prints — acdcjunior
– acdcjunior, Commented Oct 21, 2022 at 1:35
Also .then(console.log(myData)) doesn't make sense. It should probably be .then(() => { console.log(myData); }) and while we're at it, it's better to make it a .then(() => { console.log(myData); }).catch((e) => { console.log('error!', e); }) — acdcjunior
– acdcjunior, Commented Oct 21, 2022 at 1:37
here is what that logs... I removed my return cause it doesnt run with what i am trying to return... this is my data (5) [{…}, {…}, {…}, {…}, {…}] 0 : {name: 'The Best Ever Tomato Soup', ingredients: Array(15), instructions: Array(2), nutrients: {…}, tags: Array(0), …} I removed the rest of the items in the array because in my example I am only trying to access the 0 index also, I did realize my console log did not have the arrow function before it and fixed it after my initial post. Thanks. I had it in there at one point but in troubleshooting I forgot to add it back. — Sporadic
– Sporadic, Commented Oct 21, 2022 at 1:43
Can you update the snippet on the question with what you have at the moment? Including the removal of 0 and addition of the arrow function (and else)? This should make it easier for us to talk under a common ground — acdcjunior
– acdcjunior, Commented Oct 21, 2022 at 1:49
I updated the code and added a little more information that i recently noticed as well. — Sporadic
– Sporadic, Commented Oct 21, 2022 at 2:02

Dmitriy Zhiganov · Accepted Answer · 2022-10-21 05:43:44Z

0

You have an error because myData[0] is initially an empty string, so you cannot get the name property until the data have been loaded. Just add a check for myData.

  const [myData,setData] = useState('')
useEffect(() => {
    fetch('https://recipesapi2.p.rapidapi.com/recipes/tomato%20soup', options)
      .then((data) => data.json())
      .then((data) => {
        setData(data.data); console.log('this is my data', data.data)
       })
      .then(()=>console.log(myData))
  },[])   
  
  if (!myData || !myData.length) return <div>No data</div>

  return (
    <div>{myData[0]?.name}</div>
  )

answered Oct 21, 2022 at 5:43

Dmitriy Zhiganov

1,1371 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sporadic Over a year ago

Thank you. I should have been thinking like this. However, assuming react had something in place for this scenario, I spent more time looking for something that doesnt exist and no time actually solving my problem in the event react didnt have a built in solution. However, can you explain why you have a ? in the return and what its checking? I'v never seen it used like that. <div>{myData[0]?.name}</div>

Dmitriy Zhiganov Over a year ago

This is an optional chaining developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. It doesn't necessary in this situation, but still you can add it to handle when myData[0] doesn't have name property.

Collectives™ on Stack Overflow

How do I use fetched data in the return / jsx part of my React component? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related