Using Map to Display Two Arrays Overlapping Each Other-CodePudding

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>
    })
   );
  })

CodePudding user response：

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.