Use the map()
method to render lists, and always provide a unique key
prop:
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
);
}
The key
prop helps React identify which items have changed, been added, or removed, improving performance during re-renders.