Map object values from an array within an array-CodePudding

const course = [{
    id: 1,
    name: 'Half Stack application development',
    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: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  }
]

I have found it is easy to map the names "Half Stack Application Development" and "Node.js" and displaying them by doing:

{course.map(c => <li>{c.name}</li>)}

However, course.parts.map(c => <li>{c.name}</li>) returns undefined.

How would you map it so it looks like

Half Stack Application Development

Fundamentals of react
Using props to pass data
State of a component

Node.js

Routing
Middleware

Why does course.parts.map(p => p.name) return undefined and how can you access the names in the parts array?

CodePudding user response：

Presented below is a working demo using stack-snippets and ReactJS (v 16.8.0) that achieves the desired target.

const Thingy = ({courses, ...props}) => {
  return (
    <div>
      {courses.map(c => (         // iterate over the "courses" array
        <div>
          <h4>{c.name}</h4>
          {c.parts.map(p => (     // now, for each "course", iterate over "parts" array
            <li>{p.name}</li>
          ))}
        </div>
      ))}
    </div>
  );
};

const course = [{
    id: 1,
    name: 'Half Stack application development',
    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: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  }
]

ReactDOM.render(
  <div>
    DEMO
    <Thingy courses={course} />
  </div>,
  document.getElementById("rd")
);

<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

Explanation

Inline comments added to the snippet above.

CodePudding user response：

You would need to do a map within a map.

This should work:

   <ul>
    {course.map(c => (
      <>
        <li>{c.name}</li>
        <ul>
          {c.parts.map(p =>
            <li>{p.name}</li>)}
        </ul>
        </>
    ))}
    </ul>

CodePudding user response：

course and parts both are arrays, so you cannot get course.parts directly. You can do double map for the renderings like below

{course.map(c => <>
   <p>{c.name}</p>
   <ul>
      {c.parts.map(part => <li>{part.name}</li>)}
   </ul>
</>)}