useAutoKeys – an example
import {useAutoKeys} from 'react-easier';
export default function App() {
useAutoKeys();
const people = [
{ id: 1, name: 'Anna' },
{ id: 2, name: 'Boris' },
{ id: 5, name: 'Cecilia' },
{ id: 8, name: 'David' }
];
return <>
{people.map(({name}) =>
<p>{name}</p>
)}
</>;
}
With useAutoKeys everything is fine - React will automatically use the id for each person as a key for each p-tag. You will see a list of people:
Anna
Boris
Cecilia
David
Without useAutoKeys this code would still run, but because no keys would have been set, you would get the following warning:
Warning:
Each child in a list should have a unique "key" prop.
Learn more: Options for useAutoKeys