How can I map a 2 different arrays with the same component values?

Question

const App = () => { 
  const courses = [
    {
      name: 'Half Stack application development',
      id: 1,
      parts: [
        {
          name: 'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name: 'Using props to pass data',
          exercises: 7,
          id: 2
        },
        {
          name: 'State of a component',
          exercises: 14,
          id: 3
        },
        {
          name: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]

I am trying to access and print the second array in the content courses.parts.names. I was successful to access the first array by using a snipet below.

courses.map( course => <h2 key = {course.id}> {course.name} <h2/>

But I have difficulty figuring out how to access the second sub-child array.

Thank you.

score 0 · Answer 1 · answered Nov 15 '19 at 05:03

0

Try this..

courses.map(({parts})=> (
    parts && parts.length && parts.map(({id})=> <h2>{id}</h2>
    ))
)

answered Nov 15 '19 at 05:03

Vicky

592
4
5

thank you, but this will print only the component's id. – miro_muras Nov 15 '19 at 16:21
This just for demo..You can print whatever you want – Vicky Nov 18 '19 at 03:40

score 0 · Answer 2 · answered Nov 15 '19 at 05:04

0

Try this:

courses.map( course => <div key = {course.id}>
   {
       ArrayName {course.name} :
       {
           course.parts.map((part, index) => ( <div key={index}>{ part.name }</div> )
       }

   }
<div/>

answered Nov 15 '19 at 05:04

aldenn

2,060
2
11
30

score 0 · Accepted Answer · answered Nov 15 '19 at 05:06

The steps needed would be:

Reduce the courses array into an array of the parts
Iterate over the new parts array to render the components

const courses = [ ... ];
// Step 1
const parts = courses.reduce((parts, course) => {
    return [...parts, ...course.parts];
}, []);

// Step 2
parts.map(part => <h2 key={part.id}>{part.name}<h2/>);

score 0 · Answer 4 · answered Nov 15 '19 at 05:20

function App() {
  return courses.map((course, index) => {    
    return (
      <>
      <row>
        <h2 key={course.id}> {course.name} </h2>
      </row>
      {
        course.parts.map((part, index) => {
          return (
            <row>
              <p key={part.id}> {part.name} </p>
            </row>
          );
        })
      }
      </>
    );

  });
}

Hope this helps!

score 0 · Answer 5 · answered Nov 15 '19 at 05:20

The app is a function, but you are not returning anything. So try to return the items or change the to a variable.

var App = () => { 
  return courses = [
    {
      name: 'Half Stack application development',
      id: 1,
      parts: [
        {
          name: 'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name: 'Using props to pass data',
          exercises: 7,
          id: 2
        },
        {
          name: 'State of a component',
          exercises: 14,
          id: 3
        },
        {
          name: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]
  }

App().map((item)=>{
 if(item.parts){
  item.parts.map((subitem)=>{
   console.log(subitem.name)//<h2>{{subitem.name}}</h2>
  })
 }
})

How can I map a 2 different arrays with the same component values?

5 Answers5