Mixing text with react-components

Question

I habe a component with outputs pure text mixed with react-components. something like:

<div>
  lorem ipsum <b>dolor</b>,{' '}
  some <a href="#">link</a> and{' '}
  again text.
  <i>great</i>.
</div>

When rendering this, react outputs me a warning

Each child in an array or iterator should have a unique "key"

I was wondering how to solve this.

Answer 1

Remove extra curly brackets

<div>
  lorem ipsum <b>dolor</b>,some <a href="#">link</a> and again text <i>great</i>.
</div>

Answer 2

From https://reactjs.org/docs/lists-and-keys.html

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

So, you can add keys by passing them to your Component like this:

<YourComponent key={index} />

But, be aware that item index should only be a last resort for a key.

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort: