Cannot read property 'map' of undefined [React.js]

Question

so when i do my login and i try to redirect to this page it appears me that error it must be something with useEffect i dont know

here is my code

useEffect(() => {
    let canUpdate = true;
    getVets().then((result) => canUpdate && setVets(result));
    return function cleanup() {
        canUpdate = false;
    };
}, []);

const getVets = async () => {
    const url = 'http://localhost:8080/all/vet';
    const response = await fetch(url);
    const data = await response.json();
    setVets(data);
};

// const { appointmentType, animalID, room, hora, notes } = this.state;
return (
    <React.Fragment>
        <div class='title'>
            <h5>2 médicos vetenários disponíveis</h5>
        </div>
        <div>
            {vets.map((data) => (
                <ObterMedicos
                    key={data.name}
                    name={data.name}
                    specialty={data.specialty}
                />
            ))}
        </div>
    </React.Fragment>
);

}

Answer 1

vets might not have data on the first render and when the code tries to execute map operation on it, it gets undefined.map , which is not allowed.

You can either set vets to empty array at the time of defining the state

const [vets,setVets] = useState([]);

or just check on vets using Optional chaning (?) before using the map function:

{vets?.map((data) => (
                <ObterMedicos
                    key={data.name}
                    name={data.name}
                    specialty={data.specialty}
                />
            ))}