Using the same index to map two arrays in 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!

kind user · Accepted Answer · 2019-11-26 21:59:46Z

4

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>

edited Nov 26, 2019 at 21:59

answered Nov 26, 2019 at 21:54

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Skipper Lin Over a year ago

Hi @kind user, thank you so much for the response. However, I changed to the code you suggested. This is the error message: Expected an assignment or function call and instead saw an expression for <td key={j}>

kind user Over a year ago

@SkipperLin Oh, of course - you had also a syntax error - just replace { with ( ==> {this.state.comments[i].map((comment, j) => (

Skipper Lin Over a year ago

Hi @kind user, that makes sense. Understood. One follow up question: technically I hope the data for each array is displayed in a column; however, for now the data for the this.state.courses is displayed in a row. Many thanks.

kind user Over a year ago

@SkipperLin Hmm, that problem actually worths a new question:) because you need to restructure your table (depends on your needs). You should probably try to replace td with tr

Skipper Lin Over a year ago

for sure. I will try that! Thanks a lot.

|

Mritunjay Upadhyay · Accepted Answer · 2019-11-26 22:03:58Z

0

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>

answered Nov 26, 2019 at 22:03

Mritunjay Upadhyay

1,0941 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using the same index to map two arrays in React.js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related