I have this piece of code that is used to fetch data, and render it:

const [originData, setOriginData] = useState({})
const [modifiedData, setModifiedData] = useState({})

const fetchingData = async (articleId) => {
    axios.get('https://localhost:7182/article/'.concat(articleId))
      .then((response) => {
        if(articleId == 1)
            {
              setOriginData(response.data)
            }
        else
          {
            setModifiedData(response.data)
          }
      })
      .catch((error) => {
        console.log(error);
        return null;
      })
  }
  useEffect(() => {
    const fetchData = async () => {
      await fetchingData(1)
      await fetchingData(2)
    }
    fetchData()
  }, [])

Now for the important part:

  const render = (obj) => {
    Object.entries(originData).forEach(([key, data]) => {
       <p>{data.detail}</p>
      //console.log("key: " + key + " data: " + data);
    })
  }
  return (
    <div>
      {render(originData)}
    </div>
  )
}

You all see the console.log(“key: “+….) part? I got the data I needed. But when I used

<p>{data.detail}</p>

I got this eror:

Cannot read properties of null (reading 'detail')

So that means my object originData for some reason is null. So what is this? How is console.log got the data, doesn’t had any errors but when I try to render it, I have one? I think this has something to do with react component life cycle? Can somebody enlighten me?