2

I need to render content that is a mix of markdown and regular HTML. The content is queried from server, which I can't decide whether there are whitespace inside table. for example the content raw data:

# [React](https://reactjs.org/)<br>React is a JavaScript library for building user interfaces.<br><table style=\"border: 1px solid black;\">  <tr> <td> <center>TEST TEST TES</center> </td> </tr> </table>

because react-markdown typically escapes HTML, I need to use rehype-raw to render HTML properly.

For the content body above, if I just use dangerouslySetInnerHTML to render it, there will be not error except the markdown format will not be rendered.

<section dangerouslySetInnerHTML={{ __html: props.content! }}></section>

however if I use react-markdown with rehype-raw, although both HTML and markdown can be rendered, I get a warning in dev tool

        <ReactMarkdown rehypePlugins={[rehypeRaw]}>
            {props.content!}
        </ReactMarkdown>

Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code.

So my questions are:

  1. I know what this warning is, but why I don't get this warning when I use dangerouslySetInnerHTML but it appears when I use react-markdown
  2. since I can't control the content body as it's from server-side, is there any way I can prevent is warning from appearing on the dev tool?
wtf512
  • 4,487
  • 9
  • 33
  • 55

0 Answers0