Reactjs fetching data from an api in a table

this is what i have in the component file

<div>
      <Table striped>
        <thead>
        <tr>
          <th>#Number</th>
          <th>item</th>
          <th>description</th>
          <th>quantity</th>
          <th>price</th>
        </tr>
        </thead>
        <tbody>
        {items && items.map(item => {
          return (
            <tr>
              <th scope="row">{item.id}</th>
              <td>{item.items.map(item => <tr>{item.description}</tr>)}</td>
              <td>{item.items.map(item => <tr>{item.item}</tr>)}</td>
              <td>{item.items.map(item => <tr>{item.quantity}</tr>)}</td>
              <td>{item.items.map(item => <tr>{item.price}</tr>)}</td>
            </tr>
          );
        })}
        </tbody>
      </Table>
    </div>

and this is my json from the api

[
{
    "id": 1,
    "invoiceno": "invoice1",
    "description": "invoice1",
    "taxrate": 10,
    "issuedate": "2021-07-14T23:00:00.000Z",
    "duedate": "2021-07-15T23:00:00.000Z",
    "note": "invoice1",
    "taxamount": 10,
    "subtotal": 100,
    "total": 100,
    "updatedAt": "2021-05-26T23:00:00.000Z",
    "updatedBy": 14,
    "createdAt": "2021-06-01T23:00:00.000Z",
    "createdBy": 25,
    "items": [
        {
            "id": 1,
            "description": "item1",
            "item": 25,
            "quantity": 23,
            "price": 23,
            "idInvoice": 1
        },
        {
            "id": 2,
            "description": "item2",
            "item": 23,
            "quantity": 15,
            "price": 12,
            "idInvoice": 1
        }
    ]
}
 ]

i want to get the items only but when i put them in a table they keep showing in the same row like this picture i want them to be seperated what am i doing wrong enter image description here



Read more here: https://stackoverflow.com/questions/68477454/reactjs-fetching-data-from-an-api-in-a-table

Content Attribution

This content was originally published by kaskousGaming at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: