Map and render two different arrays in the same component - React

Question

I just started learning React and I'm having issues understanding how to map and and render two different arrays in the same component. In my CMS I have 3 entries containing a title and a description each. I am calling them from GraphQL with the var data. The component SectionLeft has a grid container with threeFeatures as className. In my homepage I am passing the content to the grid container with the prop bottomcontent. I am passing the component SingleFeature in array which is my grid column and will contain an icon, a title and a description, it will repeat 3 times and compose my 3 column x 1 row grid. The component SingleFeature has the prop children which should contain an array map of the constant iconList containing 3 different svg icon components. I can't understand how to write a multiple array map for the component SingleFeature which will display the same data array displayed below for the props feature and details, but will render the 3 components for children in array. Any explanation would be really appreciated. Thank you.

homepage.js

import IconOne from "../components/icons/icon-one"

import IconTwo from "../components/icons/icon-two"

import IconThree from "../components/icons/icon-three"

export const iconList = [IconOne, IconTwo, IconThree]

export default function Home({data}) {

  return (
    <div>
      <SectionLeft bottomcontent =

      {data.allContentfulHomepageWordpressFeatures.edges.map(edge => (

          <SingleFeature
          
          children = {
            ...iconList array...
          }
          feature = {
            edge.node.feature
          }
          details = {
            edge.node.description
          }
          />

        ))
      }
     />
   );
}

section-left.js

export default function SectionLeft(props) {

    return (
                <div className="threeFeatures">{props.bottomcontent}</div>

    );
}

single-feature.js

export default function SingleFeature(props) {
    return(
        <div>
        {props.children}
        <h3>{props.feature}</h3>
        <p>{props.details}</p>
        </div>
    );
}

GraphQL query

export const query = graphql`

  allContentfulHomepageSpeedFeatures {
    edges {
      node {
        feature
        description
      }
    }
  }

}

`

after every impot line use ; because you'll get another error — Oleksiï Nikonov
– Oleksiï Nikonov, Commented Feb 27, 2021 at 12:00

Szabó Sebestyén · Accepted Answer · 2021-02-27 11:58:07Z

0

I would do it this way:

data.allContentfulHomepageWordpressFeatures.edges.map((edge, index) => (

      <SingleFeature
      
      children = {
        iconList[index]
      }
      feature = {
        edge.node.feature
      }
      details = {
        edge.node.description
      }
      />

    ))

map passes the index of the element in the mapped array as a second parameter to your arrow function.

answered Feb 27, 2021 at 11:58

Szabó Sebestyén

87810 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user14637541 Over a year ago

Perfect, it worked perfectly, I just had to write the constant like that: const iconList = [<IconOne />, <IconTwo />, <IconThree />]

Szabó Sebestyén Over a year ago

Right! I forgot that you are passing icons as components directly to children. I concentrated no the mapping part.

Collectives™ on Stack Overflow

Map and render two different arrays in the same component - React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related