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