How to make the .map function to work consuming an API

Question

I'm consuming an API and I'm not getting through the map and show the data. I'm using React Redux with hooks.

this is how my Home looks like:

const Home = () => {
  const dispatch = useDispatch();
  const { profiles } = useSelector(state => ({
    profiles: state.ProfileReducer.profiles
  }));

  console.log("Do we have it???? ", profiles);

  useEffect(() => {
    dispatch(ProfileMiddleware.getOneProfile(USERNAME));
  }, [dispatch]);

  console.log("Profiles Data", profiles);

  return (
    <>
      {profiles.data &&
        profiles.data.map((p, k) => <h1>${p.profiles.firstname}</h1>)} // This not work
    </>
  );
};

export default Home;

The API response I can see in my Redux until the last console.log("Profiles Data", profiles); The API looks like this:

{
imageUrl: "http://localhost:5000/images/file-1580082526473.png"
_id: "5e2c98fc3d785252ce5b5693"
firstname: "Jakos"
surname: "Lemi"
email: "lemi@email.com"
bio: "My bio bio"
title: "Senior IT developer"
area: "Copenhagen"
username: "Jakos"
experience: (2) [{…}, {…}]
createdAt: "2020-01-25T19:37:32.727Z"
updatedAt: "2020-01-28T16:22:36.650Z"
}

Honestly cannot understand how should that map work as I'm new using Redux and FUnctional components and I got lost.

What I'm trying to do is to show one USERNAME data in the home which is like a profile user and I want to display to display that data somehow

Answer 1

Try this it should work. You are using map on an object, it is only for arrays

const {data} = [profiles];

{data &&
data.map((p, k) => <h1>${p.profiles.firstname}</h1>)} 

let apiData = {
imageUrl: "http://localhost:5000/images/file-1580082526473.png",
_id: "5e2c98fc3d785252ce5b5693",
firstname: "Jakos",
surname: "Lemi",
email: "lemi@email.com",
bio: "My bio bio",
title: "Senior IT developer",
area: "Copenhagen",
username: "Jakos",
createdAt: "2020-01-25T19:37:32.727Z",
updatedAt: "2020-01-28T16:22:36.650Z",
}



const result = [apiData].map(res => res.firstname);

console.log(result)

Answer 2

Profiles is an object, you don't have to map/loop anywhere, just:

return (
    <div>
       {profiles.data && profiles.data.firstname}
    </div>
  );