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

CodePudding user response：

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