How to use Bootstrap table in react js?

Question

This is my table code from component

I want to show my all data from database in a table format. Whenever I try to pass data through a component I will create many table as same to my data length

Answer 1

use the map function in the tbody tag

<Table responsive>
    <thead className="custom">
       ...
    </thead>
    <tbody>
    {
        items?.map((item, index) => {
            return <tr key={item.id}>
                <td>{index + 1}</td>
                <td>{item?.name}</td>
             </tr>
         })
    }
    </tbody>
</Table

Answer 2

const Component = () => {

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Image</th>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Supplier</th>
            <th>About</th>
          </tr>
        </thead>
        <tbody>
          {items?.map((item, index) => (
            <tr key={index}>
              <th>{parseInt(index) + 1}</th>
              <th>{item.image}</th>
              <th>{item.name}</th>
              <th>{item.price}</th>
              <th>{item.quantity}</th>
              <th>{item.supplier}</th>
              <th>{item.about}</th>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};