How to fix 'flattenChildren(...): Encountered two children with the same key' with React and Semantic UI

Question

I understand that the solution to this issue is to add a key={} to your element.

However, in my case, I have an array of log strings that can be the same, and I am creating a Semantic UI List like this:

<List items={logItems}></List>

How do I avoid the flattenChildren() problem?

Answer 1

You have to find a way to uniquely identify a resource

For instance if you want to render a list of logs maybe you can use as key the date that that log was generated or in the worst case if you don't have an id of that log, the date that log was created, you can use as key the index in that array (The last approach brings some issues when you modify the array in the client)

And to add the key you have to use List.Item alongside your List element for semantic-ui

Some code

<List>
  {logs.map((log, index) => <List.Item key={log.createdDate /* or index */}>
      {log}
    </List.Item>
  )}
</List>

Answer 2

items is a shorthand collection which requires unique keys. Code below are equal, because factories under hood generates a key from a value.

<List items={['foo', 'bar']} />
<List items={[{ content: 'foo', key: 'bar' }, { content: 'bar', key: 'bar' }]} />

So, if you will put an array of non-unique items you will receive React's warning. Of course, you can use array indexes as keys, but it's the antipattern.

<List items={items.map(item, i) => ({ content: item, key: i }))} />

I recommend to use an unique id of log entry or something else unique.

<List items={items.map(item, i) => ({ content: item.log, key: item.uuid }))} />