How to use map inside map in React?

Question

I have object like this:

[{a:1, rows:[]},{a:2,rows:[]}]

I want to map the the a's as table columns and rows as cells.

I'm trying like this:

  <thead>
    <tr>
      {doc.map(({
        _id, rfqID, supplier, notes, rows,
      }) => (
          <th>{supplier}</th>
        ))}
    </tr>
  </thead>
  <tbody>
    {rows.map(({ offerPrice }) => (
      <tr>
        <td>1</td>
        <td>{offerPrice}</td>
      </tr>
    ))}
  </tbody>

But I get Uncaught ReferenceError: rows is not defined What is the correct syntax to map this table with headers & items?

syntax you got right. But the variable rows you are referring is not in the scope. — Arup Rakshit
– Arup Rakshit, Commented Oct 6, 2018 at 17:59
@Villemh can you please change the marked answer as the marked answer now is not correct? — vhflat
– vhflat, Commented Oct 8, 2018 at 11:22

Hemadri Dasari · Accepted Answer · 2018-10-08 12:31:58Z

4

Since doc is array of objects you need to do map on doc and again map on rows to display offerprice

  <thead>
    <tr>
      {doc.map(({
        _id,
        rfqID,
        supplier,
        notes,
        rows,
      }) => 
        <th key={_id}>{supplier}</th>
      )}
    </tr>
  </thead>
  <tbody>
  {doc.map(({ rows }) => 
    rows.map((offerPrice, index)  =>
      <tr key={`Key-$(index)`}>
        <td>1</td>
        <td>{offerPrice}</td>
      </tr>)
  )}
  </tbody>

edited Oct 8, 2018 at 12:31

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

answered Oct 6, 2018 at 18:07

vhflat

5896 silver badges20 bronze badges

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

4 Comments

Villemh Over a year ago

Thank you! I was trying to find a way how to get access to rows inside the same map function. Was little bit confusing. This works just fine.

vhflat Over a year ago

@villemh Not sure this makes sense since you'll basically stack the rows for each element in your array on top of each other. It doesnt look like it will relate to your table head.

Hemadri Dasari Over a year ago

@vhflat You are absolutely right. My bad I didn't properly look at OP data. I upvoted your answer :)

Hemadri Dasari Over a year ago

I tried to delete my answer but unfortunately I am not able to do because its accepted answer

Collectives™ on Stack Overflow

How to use map inside map in React?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related