Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Rule proposal: prevent both children and dangerouslySetInnerHTML at the same time
See original GitHub issueReact will issue a warning if you try to use dangerouslySetInnerHTML and children at the same time.
https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L170
This should be easy enough to enforce for most cases with a linter rule.
Bad:
<div dangerouslySetInnerHTML={{ __html: 'HTML' }}>
Children
</div>
Good:
<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
<div>
Children
</div>
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
prevent some DOM elements from having children or ... - GitHub
lencioni mentioned this issue on Jul 26, 2016. Rule proposal: prevent both children and dangerouslySetInnerHTML at the same time #710.
Read more >reactjs - Can only set one of `children` or `props ...
This happens because dangerouslySetInnerHTML can only be applied to one element. In your case, <Alert/> is a complex element made up of multiple...
Read more >react/no-danger-with-children - Magestore Dev Docs - GitLab
This rule helps prevent problems caused by using children and the dangerouslySetInnerHTML prop at the same time. React will throw a warning if...
Read more >Render dangerous content with React
Since both properties works the same (in fact dangerouslySetInnerHTML implements innerHTML to set the content) they both share kinda the same ...
Read more >When using dangerouslySetInnerHTML prop for a React DOM ...
So, React will throw an exception if you specify children of the React DOM element which already has dangerouslySetInnerHTML prop. You should ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thinking about #712, which I think might be named
dom-elements-no-inner-html, I thinkdom-elements-no-danger-with-childrenmight be better actually. Plus it makes me laugh.I can work on this. What should this rule be named?
jsx-no-children-and-dangerouslySetInnerHTML?