I have an issue with my react and express/mongodb app where the first load miscData is not defined (which is the name of my collection in my mongodb database), but when I comment out all the paragraph tags and only console.log(getBasic) I am able to log it (when before I was unable to log it due to it being undefined) and then when I uncomment the paragraph tags I am able to see them now, that is until I refresh which resets this.

I have a console.log statement and then 3 html paragraphs that display the blogTitles. When I first boot it doesn't work until I do the comment save, uncomment save, refresh method mentioned above.

Here is a 1 minute video that shows what I am talking about if that didn't make much sense.

App.js:

function App() {

  const [getBasic, setGetBasic] = useState()

  async function fetchData() {
    await axios.get('http://localhost:3001/api')
    .then(result => setGetBasic(result.data))

    
  }



  useEffect(() => {
    fetchData()
  }, [])

  

  return (
    <div className="App">

      <p>{JSON.stringify(getBasic.miscData[1].blogTitle)}</p>
      <p>{JSON.stringify(getBasic.miscData[2].blogTitle)}</p>
      <p>{JSON.stringify(getBasic.miscData[3].blogTitle)}</p>
      {console.log(`getBasic ${JSON.stringify(getBasic)}`)}

    </div>
  );
}

export default App;

server.js:

app.get('/api', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  db.collection('miscData').find().toArray((err, result) => {
      if (err) return console.log(err)
      res.send({ miscData: result })
  })
})

This is what miscData looks like:

getBasic {"miscData":[{"_id":"62604421b57b621bda4171c7","blogTitle":"Different title","blogBody":"lorem ipsum etc etc etc"},{"_id":"626058bb61967575695bdade","blogTitle":"Com squadron","blogBody":"asidjaoisdoasodjiaosjdoia"},{"_id":"626059f961967575695bdadf","blogTitle":"test","blogBody":"test"},{"_id":"62605a3d36e02b8581f56154","blogTitle":"asdasda","blogBody":"adadada"},{"_id":"62608bc60bd6de526fd1b0bc","blogTitle":"new title","blogBody":"new body"}]}

My React is port 3000, and server is 3001