Why my hook state doesn´t update correctly?

Question

i don't know how make this guys, i can't update my state with the api array, and if i put it in useEffect i have an error cause i am not sending any data, help me please is my first time using stackoverflow

    import React, { useEffect, useState } from "react";
    import getTeam from "../Helpers/getTeam";
    
    const selectTeams = [
        "Barcelona",
        "Real Madrid",
        "Juventus",
        "Milan",
        "Liverpool",
        "Arsenal",
    ];
    
    const Select = () => {
        const [team, setTeam] = useState(null);
        const [loading, setLoading] = useState(null);
    
        const handleOption = async (e) => {
            setLoading(true);
            let teamsJson = await getTeam(e.target.value);
            let arr = [];
            Object.keys(teamsJson).map((teamjs, i) => {
                return arr.push(teamsJson[teamjs]);
            });
            console.log(arr);
            console.log(team);
            setTeam(arr);
            setLoading(false);
        };
    
        return (
            <div
                style={{ background: "skyblue", textAlign: "center", padding: "20px" }}
            >
                <h1>Equipos Disponibles</h1>
                <div>
                    <select onChange={handleOption}>
                        <option>Elige tu equipo</option>
                        {selectTeams.map((selectTeam, i) => {
                            return <option key={i}>{selectTeam}</option>;
                        })}
                    </select>
                </div>
                {loading ? <h1>suave</h1> : (
                    team !== null ? (
                        team.map((newTeam, i) => {
                            return (
                                <div>
                                    the items are here
                                </div>
                            )
                        })
                    ) : null
                )}
            </div>
        );
    };
    
    export default Select;

i let you my api file down

const getTeam = async (teamName) => {
    const url = `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${teamName}`;

    const res = await fetch(url);

    const team = await res.json();

    return team;
};

export default getTeam;

i wanna update my const team with the response of my api call, but it doesn't update it, i dont know what do, please help me

Answer 1

The teamsJson value is an object with a single key and value of some array

{ teams: [...] }

So you are updating your state with a nested array when you push the value into another array.

let arr = [];
Object.keys(teamsJson).map((teamjs, i) => {
  return arr.push(teamsJson[teamjs]);
});

Based upon how you want to map your team state array I assume you just want the raw inner array from teamJson.

const { teams } = await getTeam(e.target.value);
setTeam(teams);

Then when you are mapping you can access any of the properties you need.

team.map((newTeam, i) => {
  return <div key={i}>{newTeam.idTeam}</div>;
})

Answer 2

I've just tested it & it seems to works just fine.

The only 2 issues seem to be that:

1. You don't use team anywhere (apart from a console.log statement).
2. At the moment when you console.log(team); the constant team will (yet) be null for the first time (because it still keeps the initial state).

Here's what I see in React dev tools after picking a random team in the <select>: