Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm new to react, I'm getting this error constantly and after google some I can't find the reason why the useState value can't be read as array :( ... this the error I'm getting: 'TypeError: team.map is not a function'

    import React, { useEffect, useState } from "react";
    const SportTeams = () => {
      const [team, setTeam] = useState([]);
      useEffect(() => {
        const getSports = async () => {
          const response = await fetch("https://www.thesportsdb.com/api/v1/json/1/all_sports.php");
          const data = await response.json();
          setTeam(data);
          console.log(data);
        getSports();
      }, []);
      return (
        <div className="myClass">
            {team.map((sport, index) => {
              return <li key={`${sport.strSport}-${index}`}>{sport.strSport}</li>
    export default SportTeams;
                becausue you map it before it fetches the data from api you can solve it like: {team.length > 0 && team.map((sport, index) => {               return <li key={${sport.strSport}-${index}}>{sport.strSport}</li>             })}
– webcoder
                Mar 18, 2021 at 5:18
It is because you are setting the team state with the data without checking if its undefined. If the data is undefined your state team become undefined as well. So make sure to check the data.
    import React, { useEffect, useState } from "react";
        const SportTeams = () => {
          const [team, setTeam] = useState([]);
          useEffect(() => {
            const getSports = async () => {
              const response = await fetch("https://www.thesportsdb.com/api/v1/json/1/all_sports.php");
              if (response) {
                const data = await response.json();
                if (data) {
                  setTeam(data);
              console.log(data);
            getSports();
          }, []);
          return (
            <div className="myClass">
                {team.map((sport, index) => {
                  return <li key={`${sport.strSport}-${index}`}>{sport.strSport}</li>
        export default SportTeams;
There might also be the chance that your response is not what you expected and the actual data might be inside your response. In that case you need check what your response first then proceed to set the data.
                Have you checked your response? As Mukarram Javid mentioned below. looks like your data is not an array instead data.sports is the array you want to set.
– Yadab
                Mar 18, 2021 at 5:29
As I said in my comment. the value you are setting to teams isn't an array.
const data = await response.json();
setTeam(data.sports);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.