问从数组中的数组映射对象值

EN

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

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>

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