Using Map to Display Two Arrays Overlapping Each Other

Question

Consider two arrays:

props = ['prop1','prop2','prop3']

about = ['about1','about2','about3']

I'm looking to display them in a way where the index of each array is paired to the other, sort of like:

props[0] - 'prop1'
about[0] - 'about1'

props[1] - 'prop2'
about[1] - 'about2'

So far i've tried nesting two maps together but i'm getting an output of many repetitive or invalid values. Does anyone know how I can tweak the solution I have to properly display the arrays with map?

 props.map( arg => {
   return (
    about.map ( arg2 => {
      <div>
      <p> {arg} </p>
      <p> {arg2} </p>
      </div>
    })
   );
  })

Why not adjust your input so it's an array of objects?

Andy
– Andy

2022-02-16 01:43:07 +00:00
Commented Feb 16, 2022 at 1:43 — Andy
– Andy, Commented Feb 16, 2022 at 1:43

usmahm · Accepted Answer · 2022-02-16 01:47:36Z

2

What you need to do is use the index property on the map method to access the element in the second array at the same index as the first.

Your code would look like this

 props.map((arg, i) => {
   return (
     <div>
       <p>{arg}</p>
       <p>{about[i]}</p>
     </div>
   );
 });

However, you should note that for this to work, both arrays have to be of the same length, or the one you're mapping should be of greater length than the second. Else you would get undefined for some values.

edited Feb 16, 2022 at 1:47

answered Feb 16, 2022 at 1:41

usmahm

935 bronze badges

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

Collectives™ on Stack Overflow

Using Map to Display Two Arrays Overlapping Each Other

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related