Reactjs fetching data from an api in a table

this is what i have in the component file

      <Table striped>
        {items && => {
          return (
              <th scope="row">{}</th>
              <td>{ => <tr>{item.description}</tr>)}</td>
              <td>{ => <tr>{item.item}</tr>)}</td>
              <td>{ => <tr>{item.quantity}</tr>)}</td>
              <td>{ => <tr>{item.price}</tr>)}</td>

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:

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: