使用相同的索引来映射React.js中的两个数组

Question

I want to display a table in React. The first column is all the courses taught by the prof, and the second column is at most three comments associated with that course. Data for all the courses are stored at

this.state.courses

All the comments are nested array mapping to the course order. Access comments for the first course is

this.state.comments[0]

My code for now did not work, but this is my attempt

                    <Table striped bordered hover>
                        <thead>
                            <tr>
                                <th>{`Courses Taught By ${this.state.professorname}`}</th>
                                <th>{`Comments on Course`}</th>
                                <th>{`Comments on Prof`}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                {this.state.courses.map((course, i) => (
                                    <td key={i}>
                                        <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
                                    </td>
                                ))}
                                {this.state.comments[i].map((comment, j) => {
                                    <td key={j}>
                                        <p>{this.state.comments[i][j]}</p>
                                    </td>
                                })}
                            </tr> 
                        </tbody>
                    </Table>

I could really the help for this one. Thanks!

Answer 1

The second loop is out of the scope of the first one - it does not have access to i .

You should move the second map inside the first one, to be able to access it.

<tr>
    {this.state.courses.map((course, i) => (
       <>
          <td key={course._id}>
             <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
          </td>
          {this.state.comments[i].map((comment, j) => (
             <td key={j}>
                <p>{this.state.comments[i][j]}</p>
             </td>
          ))}
      </>
    ))}                                   
</tr> 

Answer 2

Two problem I can see in your code.

First i from first loop is not available in second loop(out of scope).

Second you are not returning anything in second map functions.

<tr>
{this.state.courses.map((course, i) => (
   <>
      <td key={course._id}>
         <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
      </td>
      {this.state.comments[i].map((comment, j) => {
  return (
         <td key={j}>
            <p>{this.state.comments[i][j]}</p>
         </td>
      )
   })}
  </>
))}                                   
</tr>