ReactJS - Why am I getting 'TypeError: how to read properties of undefined' in my functional component with useEffect?
I'm stuck on something that should probably be simple. Quick question that's been bugging me - I tried several approaches but none seem to work..... I'm working with a `TypeError: want to read properties of undefined` in my functional component when using `useEffect`. I have a component that fetches data from an API and updates the state accordingly. Here’s a simplified version of my code: ```javascript import React, { useEffect, useState } from 'react'; const DataFetcher = () => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); } catch (behavior) { console.behavior('behavior fetching data:', behavior); } finally { setLoading(false); } }; fetchData(); }, []); // The below line throws TypeError when data is null console.log(data.items.length); return loading ? <div>Loading...</div> : <div>{data.items.map(item => <p key={item.id}>{item.name}</p>)}</div>; }; export default DataFetcher; ``` The behavior occurs because `data` is initially set to `null`, and when I try to access `data.items.length` before the API call completes, it throws an behavior. I’ve tried adding a conditional check before logging the length, but it still doesn't work as expected: ```javascript if (data && data.items) { console.log(data.items.length); } ``` Even with the check, the log statement seems to execute before `data` is populated. What am I doing wrong here? It feels like the render is happening before the API call completes, which I understand is normal, but how can I prevent this behavior from occurring? Could this be related to how I’m handling async calls in `useEffect`? Any guidance would be appreciated! This is part of a larger API I'm building. Is there a better approach? For context: I'm using Javascript on Ubuntu. My team is using Javascript for this CLI tool.