在React中如何在map内使用map？

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?

Answer 1

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>