Question 293255 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Map over an array within an object of arrays

I am using a reusable component for React, and I am trying to map over an array within an object of arrays to go inside of this component.
the data looks like:


export const portfolioData= 
[{
title: "Drum Kit",
url: "some url",
codeUrl: "some github repo",
mobileFriendly: false,
img: "some img",
techUsed: [
    "React",
    "APIs",
    "Custom Hooks",
],
},

The map looks like:

<div>
               {portfolioData.map((portfolio,i)=>(<PortfolioCard key={i}>{portfolio}</PortfolioCard> ))}
            </div>

and the reusable component looks like:

 <div>
            <img src={img} />
            <h3>{title}</h3>
            <button target="_blank" href={url}><FaCode />
            </button>
            <button target="_blank" href={codeUrl}><CgWebsite />

            </button>
            <ul>
                <li>{mobileFriendly}</li>
                <li>{techUsed}</li>
            </ul>

        </div>

When I use .map() it recognises that I have mapped over something but it doesn’t show anything up on the screen, just three empty components (I have 3 objects in my array).

Tags:

3

Answers


  1. 0

    I’m just learning React (in fact did it over the Thanksgiving holiday!) and this was one of the first things I learned.

    The issue with your map is that the output produces a PortfolioCard component for each item in Array. Because of that, you have to enclose it in either a <div> tag or a <> tag.

    I whipped up an example using your code that you can try out.

    (I can’t figure out how the StackOverflow in-page console works, sorry).

    Login or Signup to reply.
  2. 0

    If you want to use the property values in the object as props, you can spread them into the component.

    {portfolioData.map((portfolio,i) => <PortfolioCard {...portfolio} key={i} />)}
    Login or Signup to reply.
  3. 0

    Do the following:

    I modified your array as it was missing this ]

    export const portfolioData = [
  {
    title: "Drum Kit",
    url: "some url",
    codeUrl: "some github repo",
    mobileFriendly: false,
    img: "some img",
    techUsed: ["React", "APIs", "Custom Hooks"],
  },
];

    Next, Mapped portfolioData with the PortfolioCard component while passing the portfolioData object as a prop to PortfolioCard

     <div>
    {portfolioData.map((portfolio, i) => (
      <PortfolioCard key={i} portfolio={portfolio} />
     ))}
 </div>

    After that, modify your PortfolioCard component to take in a prop portfolio and use it through out the entire component below:

    function PortfolioCard({ portfolio }) {
  return (
    <div>
      <img src={portfolio.img} alt="img" />
      <h3>{portfolio.title}</h3>
      <a target="_blank" href={portfolio.url}>
        <FaCode />
      </a>
      <a target="_blank" href={portfolio.codeUrl}>
        <CgWebsite />
      </a>
      <ul>
        <li>{portfolio.mobileFriendly}</li>
        <li>
          {portfolio.techUsed.map((item, i) => (
            <span key={i}>{item}x</span>
          ))}
        </li>
      </ul>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search