Working on website using reactJS and Laravel, while fetching json data from URL using map function finding this error on console :
teams.map is not a function TypeError: teams.map is not a function
API json response from URL :
{ "get": "teams", "parameters": { "name": "manchester united" }, "errors": [], "results": 1, "paging": { "current": 1, "total": 1 }, "response": [ { "team": { "id": 33, "name": "Manchester United", "code": "MUN", "country": "England", "founded": 1878, "national": false, "logo": "https://media.api-sports.io/football/teams/33.png" }, "venue": { "id": 556, "name": "Old Trafford", "address": "Sir Matt Busby Way", "city": "Manchester", "capacity": 76212, "surface": "grass", "image": "https://media.api-sports.io/football/venues/556.png" } } ] }
Getting json data like this :
`import React, { useEffect, useState } from “react”;
const TeamStats = () => {
const [teams, setTeams] = useState([]);
const getTeams = async () => {
const response = await fetch("http://localhost:8000/home");
const data = await response.json();
console.log(data);
setTeams(data);
};
useEffect(() => {
getTeams();
}, []);
....
....
{teams.map(res => (
<h4 className="text-black text-overflow">{res.response.team.name}</h4>
))}`
the API data calling was successful found in console.log but to display data on window error is popping again here’s my code and also attaching console output image.