rich-text icon indicating copy to clipboard operation
rich-text copied to clipboard

Wrapping `[BLOCKS.QUOTE]: children` triggering React warning keys in `rich-text-react-renderer`

Open 5ervant opened this issue 3 years ago • 3 comments

Using @contentful/rich-text-react-renderer.

I have to wrap blockquote in <pre> for allowing me to quote my inputted code without any missing spaces on the output.

This results in a "Warning: Each child in a list should have a unique "key" prop.":

    [BLOCKS.QUOTE]: (node, children) => <pre>{children}</pre>,

Unfortunately, this also results in React warning keys:

    [BLOCKS.QUOTE]: (node, children) => (
      <pre>
        {children.map((par) => (
          <p key={par.key}>
            {par.props.children.map((child, i) => (
              <React.Fragment key={i} children={child} />
            ))}
          </p>
        ))}
      </pre>
    ),

Any solution? Isn't that the common way to output every space you input? Thanks.

Example:

This has multiple s  p   a    c     e       s.

5ervant avatar Jun 21 '21 14:06 5ervant