7

I have a Next.js app that I'm deploying to vercel and am using ReactMarkDown component to render some content from a Strapi backend.

While this works locally, deployment fails with the following log:

49:54  Error: Do not pass children as props. Instead, nest children between the opening and closing tags.  react/no-children-prop

<ReactMarkdown key={idx} children={content.answer} />

I assume that this is the culprit, it being unhappy with the use of "children" as a prop name, but... the ReactMarkDown component's prop to render content is... children.

I have tried this, with the following.

<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />

The first, doesn't change anything, the latter doesn't work, with the content no longer showing up.

Any suggestions greatly appreciated.

darkecho2788
  • 85
  • 1
  • 7
  • 1
    Something like `A paragraph with *emphasis* and **strong importance**.` works for me. What are the contents of `content.answer`? – juliomalves Feb 13 '22 at 17:03
  • Hi, it's a Rich Text coming from Strapi backend. https://stackoverflow.com/questions/69180817/why-does-rich-texts-on-strapi-keeps-markups-visible-in-my-app I use Markdown according to this and other similar resources to format the big blob of unformatted words (despite it looking formatted in Strapi). Deployment fails for me due to ESLint, but I don't want to turn off ESLint if unnecessary over a proper fix. – darkecho2788 Feb 13 '22 at 17:12
  • 1
    You can simply disable that specific rule (`react/no-children-prop`) as a last resort. No need to turn off ESLint completely. – juliomalves Feb 13 '22 at 17:16

2 Answers2

2

I would suggest a temporary fix would be adding this comment before the line that uses the children property.

{// eslint-disable-next-line
}

Add this on the line using the children property. There have been issues closed on eslint about how the disable comments work with jsx. Must be on the same line, so note the formatting.

Example:

<ReactMarkdown >{content.answer}</ReactMarkdown>
{// eslint-disable-next-line 
}<ReactMarkdown key={idx} children={[content.answer]} />

This way, you won't have to completely disable eslint.

treckstar
  • 1,956
  • 5
  • 21
  • 26
Zavvy
  • 29
  • 2
0

To build on @Zavvy's answer above, I fixed my issue using eslint-disable-next line, with a slightly different formatting.

My initial code was the following (which gave the react/no-children-prop error):

return (
   <ReactMarkdown 
        className={props.className}  
        children = {props.markdown || defaultMarkdown} />
);

I then tried Zavvy's answer, so I don't have to disable eslint entirely:

return (
   <ReactMarkdown 
        className={props.className}
        {// eslint-disable-next-line 
        }children = {props.markdown || defaultMarkdown} /> 
);

-> Which is (I now realize) obviously incorrect (because I inserted it in the wrong place) and gives a syntax error.

So I ended up changing it as below, which solved the error and allowed the build to complete:

return (
   // eslint-disable-next-line 
   <ReactMarkdown className={props.className}  children = {props.markdown || defaultMarkdown} /> 
);

Thanks to @Zavvy for the simple solution.

27shutterclicks
  • 1
  • 1