I have an object like so:
{
"id": 1,
"name": "car",
"colors": ["white", "black"]
}
I put my object into data using useState.
When i try data.name the result is "car"
When i try data.colors the result is "whiteblack"
But when i try mapping over the colors using:
{data.colors.map((color, i) =>
<span key={i} >{color}</span>
)}
Ill get TypeError: Cannot read property 'map' of undefined
What am I missing?
One likely reason is that you try to map over data before data is loaded. For example, if you initiate a fetch call to some resource when a component is loaded but also map over the returned object at the same time. In that case, data would be undefined.
A simple fix would be to check if data is undefined before mapping over it.
{data && data.colors.map((color, i) =>
<span key={i} >{color}</span>
)}
May be it's state initializing issue, you could do something like this:
const [state, setState] = useState({ "id": "", "name": "", "colors": [] }); useEffect(() => setState({ "id": 1, "name": "car", "colors": ["white", "black"] }), []);
This will fix your map of undefined issue.
