TypeError: Cannot read property 'map' of undefined React Hooks

Question

I need some help understanding why I'm getting the error from the title: 'TypeError: Cannot read property 'map' of undefined'. I need to render on the page (e.g state & country here) some data from the API, but for some reason is not working.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const APIFetch = () => {
    const [user, setUser] = useState('');
    const [info, setInfo] = useState([]);

    const fetchData = async () => {
        const data = await axios.get('https://randomuser.me/api');
        return JSON.stringify(data);
    }

    useEffect(() => {
        fetchData().then((res) => {
            setUser(res)
            setInfo(res.results);
        })
    }, [])

    const getName = user => {
        const { state, country } = user;
        return `${state} ${country}`
    }

    return (
        <div>
            {info.map((info, id) => {
                return <div key={id}>{getName(info)}</div>
            })}
        </div>
    )
}

Can you guys provide me some help? Thanks.

Answer 1

You do not need to JSON.stringify(data);

const fetchData = async () => {
    const data =  await axios.get('https://randomuser.me/api');
    return data.data
}

Answer 2

Try this approach,

const APIFetch = () => {
  const [user, setUser] = useState("");
  const [info, setInfo] = useState([]);

  const fetchData = async () => {
    const data = await axios.get("https://randomuser.me/api");
    return data;  <--- Heres is the first mistake
  };

  useEffect(() => {
    fetchData().then((res) => {
      setUser(res);
      setInfo(res.data.results);
    });
  }, []);

  const getName = (user) => {
    const { state, country } = user.location;  <--- Access location from the user
    return `${state} ${country}`;
  };

  return (
    <div>
      {info.map((info, id) => {
        return <div key={id}>{getName(info)}</div>;
      })}
    </div>
  );
};

1. Return data without stringify inside the fetchData.
2. Access user.location inside getName.

Code base - https://codesandbox.io/s/sharp-hawking-6v858?file=/src/App.js

Answer 3

Do it like that

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const APIFetch = () => {
    const [user, setUser] = useState('');
    const [info, setInfo] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const res = await axios.get('https://randomuser.me/api');
            setUser(res.data);
            setInfo(res.data.results);
        }
        featchData();
    }, [])

    const getName = user => {
        const { state, country } = user;
        return `${state} ${country}`
    }

    return (
        <div>
            {info.map((info, id) => {
                return <div key={id}>{getName(info)}</div>
            })}
        </div>
    )
}

Codesandbox: https://codesandbox.io/s/vigorous-lake-w52vj?file=/src/App.js