CODEWITHSUNDEEP
reactjs
Jakub
Jakub

Reputation: 2709

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

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: "[email protected]"
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

Upvotes: 0

Views: 50

Answers (2)

Borjante
Borjante

Reputation: 10487

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

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

Upvotes: 1

Adi
Adi

Reputation: 174

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: "[email protected]",
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)

Upvotes: 1

Related Questions