key="0" attribute on root element disrupts rendering

[kromit]

When processing multiple HTML chunks <p>mytext-1</p>, <p>mytext-2</p>, <p>mytext-3</p>
the parser generates key="0" attribute every time.

<div>
  {parser.parse('<p>mytext-1</p>`')}
  {parser.parse('<p>mytext-2</p>`')}
  {parser.parse('<p>mytext-3</p>`')}
</div>

This causes react-warnings and disrupts rendering since the children can not be distinguished from each other with same key="0" attribute.

key="0" on root element should not be rendered at all.

react warning:

Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[aknuds1]

Can't you easily solve this by enclosing the parsed chunks in div elements? For example:

<div>
  {parser.parse('<p>mytext-1</p>`')}
</div>
<div>
  {parser.parse('<p>mytext-2</p>`')}
</div>
<div>
  {parser.parse('<p>mytext-3</p>`')}
</div>

[aknuds1]

Also, can't you concatenate the HTML chunks into a single document, that you then parse? That sounds like a better approach to me.

[kromit]

Yes, thank you. I know the workarounds, but I can not use them since the processing is dynamic, so I do not have all snippets and I can not change the HTML structure.