reactjs – What the best practice to render a list in React.js without unique IDs?
If your data is static you can take data out of the component like this:
const dataWithKeys = data.map((el, i) => ({ ...el, uniqKey: i }));
In this case, keys will be truly unique.
With server data you can use this approach:
const dataWithKeys = useMemo(
() => data.map((el, i) => ({ ...el, uniqKey: `${i} ${el}` })),
[data]
)
When you need to change the element, new render will occur in any case.
If your data is a list of strings, renders will be very cheap anyway. Otherwise, you should try to ‘compose’ a unique key from several values of object:
{data.map(el => (
<div key={`${el?.name} ${el.lastName} ${el.registrationDate}`}>
{el.name}
</div>
))}
Read more here: Source link
