How can I resolve ReactMarkDown that uses "children" as a prop w/ Error Do not pass children as props

user_13747048 0
Viewed 893

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.

react-markdown vercel next.js reactjs deployment
1 Answers

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.

user_194890040
Related