jsx-eslint/eslint-plugin-react

Rule proposal: enforce shape of dangerouslySetInnerHTML

Open

#711 opened on Jul 26, 2016

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
help wantednew rulequestion

Description

React will issue a warning if you try to use dangerouslySetInnerHTML with a value of the wrong shape.

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L173-L177

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div dangerouslySetInnerHTML={{ }} />

<div dangerouslySetInnerHTML={{ html: 'HTML' }} />

<div dangerouslySetInnerHTML={true} />

Good:

<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />

Contributor guide

Tech stack
javascriptreact
Domain
developer experiencetooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptReactESLint plugin development basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the existing rules in eslint plugin react (e.g., lib/rules/) for structure. Understand how to write an ESLint rule using AST selectors. The issue references a React source file (ReactDOMComponent.js) for the expected shape. Implement a rule that checks the argument to dangerouslySetInnerHTML matches { html: string }.