我如何在React中为我的数组正确使用map方法

Question

I am trying to use the map method to display the parts name and exercise instead of hardcoding it, I can use the map method but I can't use it passing it with props

   {course.parts.map(note => (
    <p key={note.id}>
      {" "}
      {note.name} {note.exercises}
    </p>
  ))} 

I added this into my return body which works how can I destructure this?

 const App = () => {
 const course = {
 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
   }
   ]
  };

const rows = () =>
course.parts.map(note => <Course key={note.id} course={note} />);

return (
 <div>
   <Header course={course.name} />

   {rows()}
 </div>
 );
 };

const Course = course => {
console.log(course);
  return (
  <p>
    {" "}
    {course.name} {course.exercises}
  </p>
  );
 };

Expected: Fundamentals of React 10 Using props to pass data 7 State of component 14 But the result is blank.

Answer 1

Here you are passing course props to your component like,

<Course key={note.id} course={note} />

You need to access the course props in your child component using props.course

const Course = (props) => { 
console.log(props.course);
  return (
  <p>
    {" "}
    {props.course.name} {props.course.exercises}
  </p>
  );
 };

or you can directly destructure your props like,

const Course = ({course}) => { //direct destructuring
console.log(course);
  return (
  <p>
    {" "}
    {course.name} {course.exercises}
  </p>
  );
 };

Answer 2

You don't need this much of components to achieve your requirement. You can simply do

const course = {
  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,
    },
  ],
};

const App = () => {
  const { name, parts } = course;

  return (
    <div>
      <Header course={name} />
      {parts.map(note => (
        <p key={note.id}>{`${note.name} ${note.exercises}`}</p>
      ))}
    </div>
  );
};

Note:

I have removed the space before the paragraph but if you need it then you can change that line to

{ ${note.name} ${note.exercises} }