Key prop not being recognized in React - reactjs

Question

I have a component called ListSuppliers, in it I have a bootstrap modal, it contains a table, and I want to populate that table from a postgresql table. Below is what I have in my Fragment section for the modal:
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header d-flex justify-content-center">
<h4 className="modal-title">Supplier Name</h4>
</div>
<div className="modal-body">
<h3 className="text-center mt-2">Search Bar</h3>
<form>
<input
type="text"
className="form-control"
/>
</form>
<table className="table mt-5">
<thead>
<tr>
<th>Supplier Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{suppliers.map(supplier => (
<tr key={supplier.supplier_id}>
<td>{supplier.supplier_name}</td>
<td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And here is what I have for my ListSuppliers components and routes:
const ListSuppliers = () => {
const [suppliers, setSuppliers] = useState([]);
//Populate modal table function
const getSuppliers = async () => {
try {
const response = await fetch("http://localhost:5000/supplier");
const jsonData = await response.json();
setSuppliers(jsonData);
} catch (err) {
console.log(err.message);
}
}
//routes from index.js file
app.get("/supplier", async (req, res) => {
try {
const allSuppliers = await pool.query("SELECT supplier_name FROM supplier ORDER BY supplier_id ASC");
res.json(allSuppliers.rows);
} catch (err) {
console.error(err.message);
}
})
//Delete supplier entry
app.delete("/supplier/:id", async (req, res) => {
try {
const {id} = req.params;
const deleteSupplier = await pool.query('DELETE FROM supplier WHERE supplier_id = $1', [id]);
res.json(id);
} catch (err) {
console.error(err.message);
}
})
My modal displays the information as intended, however I'm getting this error:
Warning: Each child in a list should have a unique "key" prop
Check the render method of `ListSuppliers`
I don't understand why I'm getting the error as I included the key prop in table row:
{suppliers.map(supplier => (
<tr key={supplier.supplier_id}>
<td>{supplier.supplier_name}</td>
<td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
</tr>
))}
Any help is much appreciated

Answer 1

Check if supplier_id is present.
Lastly, try this and see if the warning comes up
{suppliers.map((supplier, index) => (
<tr key={index}>
<td>{supplier.supplier_name}</td>
<td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
</tr>
))}