I’m having an odd issue. So I’m using fetch api to get some static data from an api endpoint to get some data. When I then try to map over the data it tells me map is not a function. So I’m making this in react. Also I haven’t used fetch too much so maybe I’m missing something easy.
Here is the fetchData code where I get the data no problem and then using setScanData(resData) for some state.
const fetchData = async () => {
const res = await fetch(baseURL + apiAddOn);
const resData = await res.json();
setScanData(resData)
}
Here is how the resData comes back.
[
{
"teamName": "Team 1",
"date": "2021-01-19",
"tasksAWeek": 14
},
{
"teamName": "Team 2",
"date": "2021-01-19",
"tasksAWeek": 21
},
{
"teamName": "Team 3",
"date": "2021-01-19",
"tasksAWeek": 36
}
]
And then here is how I try to map over the data and where is gives me the map is not a function error.
{scanData.map((data) => {
<div key={`${data.teamName}-${data.date}`}>
<p>Team Name: {data.teamName}</p>
<p>Date: {data.date}</p>
<p>Scans a Week: {data.scansAWeek}</p>
<p>Total Scans: {data.totalScans}</p>
</div>
})}
But ye so I’m not too sure where I’m going wrong with this. Any help would be useful.
