Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.

[RockingStarz]

I'm trying to get list of employees from SQL server using .net core 6.0 controller and i see that call is made and data is fetched. but, while displaying i am getting the above error and no data is displayed / rendered.

please help.

Error: **react_devtools_backend_compact.js:2367 Warning: Each child in a list should have a unique "key" prop.

Check the render method of App. See https://reactjs.org/link/warning-keys for more information. at tr at App (http://localhost:44407/static/js/bundle.js:31:84)**

App.js

import { useEffect, useState } from "react";

const App = () => {

    //1 create useState
    const [employees, setEmployees] = useState([]);

    //2 call api
    useEffect(() => {
        fetch("api/employee/GetEmployees")
            .then(response => { return response.json() })
            .then(responseJson => {
                setEmployees(responseJson)
            })
    }, []) 

    //3 create div and table
    return (
        <div className="container">
            <h1>Employees</h1>
            <div className="row">
                <div className="col-sm-12">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>EmployeeID</th>
                                <th>Employee Name</th>
                                <th>Type</th>
                                <th>Email Address</th>
                            </tr>
                        </thead>

                        <tbody>
                            {
                                employees.map((item) => (
                                    <tr key={item.EmployeeID }>
                                        <td>{item.EmployeeID}</td>
                                        <td>{item.FirstName}</td>
                                        <td>{item.Type}</td>
                                        <td>{item.EmailAddress}</td>
                                    </tr>
                                ))
                            }
                        </tbody>
                    </table>

                </div>

            </div>

        </div>

        )
}

export default App;

index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
//import ReactDOM from 'react-dom/client';
import App from './App';

const root =  createRoot(document.getElementById("root"));

root.render(

    <App/>

)

[timomeh]

Your question is unrelated to this project. You can find the answer to your question by following the link in the error you posted: "See reactjs.org/link/warning-keys for more information." I recommend reaching out to the appropriate channel or forum for help with your query.