React-markdown: React 16.0.0: keys not correctly handled while iterating arrays?

Created on 1 Oct 2017 · 3Comments · Source: remarkjs/react-markdown

Somewhere react-markdown is not using keys correctly on [email protected]?
This happens only on [email protected], back on [email protected] is fine.

Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in p (created by ReactMarkdown)
    in div (created by ReactMarkdown)
    in ReactMarkdown (created by News)
    in div (created by News)
    in News

Source

damianobarbati

👍6

Most helpful comment

This occurs because the softBreak setting inserts <br /> elements as child elements to e.g. a paragraph, which then no longer has a single text node child, but an array of text nodes and element nodes.

It can be worked around with e.g. a custom Paragraph renderer:

const Paragraph = ({ children }) => (
  <p>
    {React.Children.toArray(children)}
  </p>
)

...assuming that linebreaks will mostly be inserted in paragraphs, but realistically this would require a custom renderer for any element that might contain linebreaks, so a general fix is needed.

bewildergeist on 24 Oct 2017

👍5

All 3 comments

I have the same issue, but only with softBreak="br". Turning that feature off removes the error, but of course that does not help.

pcvandamcb on 18 Oct 2017

It can be worked around with e.g. a custom Paragraph renderer:

const Paragraph = ({ children }) => (
  <p>
    {React.Children.toArray(children)}
  </p>
)

...assuming that linebreaks will mostly be inserted in paragraphs, but realistically this would require a custom renderer for any element that might contain linebreaks, so a general fix is needed.

bewildergeist on 24 Oct 2017

👍5

Fixed in v2.5.1 thanks to @alexzaworski