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
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>
);
};
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