style property of a React DOM element should be an object
- REACT_BAD_STYLE_PROP
- Error
- High
- react
This rule applies when the style property of a React DOM element is not specified with an object.
Unlike HTML, a string representing CSS rule is not allowed as the value of a style property. If you specify a value other than object, null, or undefined, React will throw an exception.
Noncompliant Code Example
View with compliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
getTextStyle() {
return { color: 'blue' };
}
render() {
return (
<div>
<div style="color: 'red'">Text in red</div> {/* REACT_BAD_STYLE_PROP alarm because it is a string value. */}
<div style={this.getTextStyle}>Text in blue</div> {/* REACT_BAD_STYLE_PROP alarm because it is a function value. */}
</div>
);
}
}Compliant Code Example
View with noncompliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
getTextStyle() {
return { color: 'blue' };
}
render() {
return (
<div>
<div style={{ color: 'red' }}>Text in red</div>
<div style={this.getTextStyle()}>Text in blue</div>
</div>
);
}
}Version
This rule was introduced in DeepScan 1.3.0-beta.
See
React Error: The
styleprop expects a mapping from style properties to values, not a string.