Display Lists in React JSX

Last Updated on June 17, 2024

function List() {

const people = [

{id: 1, name: "Mahmood"},

{id: 2, name: "Ali"},

{id: 3, name: "Javad"}

];

return (

<ul>

{people.map((value, index) => (

<li key={value.id}>{value.name}</li>

))}

</ul>

);

}

export default List;

function List() {
    const people = [
        {id: 1, name: "Mahmood"},
        {id: 2, name: "Ali"},
        {id: 3, name: "Javad"}
    ];

    return (
        <ul>
            {people.map((value, index) => (
                <li key={value.id}>{value.name}</li>
            ))}
        </ul>
    );
}

export default List;

Keys help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.

References
https://reactjs.org/docs/lists-and-keys.html

Related