React API should be called with arguments of correct types
- REACT_MISMATCHED_TYPE_OF_ARG
- Error
- High, Medium
- cwe, react
This rule applies when React API is called with arguments of wrong types.
Because React API has the specification for its arguments, React will throw an error or output a warning message if the types of arguments are wrong.
For example, if setState() is called with null or undefined as the first argument, it is likely a programmer's mistake because neither state update nor re-rendering happens. If unconditional re-rendering was intended, foreceUpdate() should be used instead.
Note: Prior to React 16, if setState() is called with null or undefined as the first argument, re-rendering was triggered.
Noncompliant Code Example
View with compliant examples side by sideimport React from 'react';
import ReactDOM from 'react-dom';
// Example 1
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { greetName: 'hello' };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState('bye'); // REACT_MISMATCHED_TYPE_OF_ARG alarm because the first argument's type of 'setState()' method should be object, function, or null.
}
render() {
return <div onClick={this.handleClick}>{this.state.greetName}</div>;
}
}
// Example 2
const hi = <div key={'hi'}>hi</div>;
const bye = <div key={'bye'}>bye</div>;
ReactDOM.render(
{hi, bye}, // REACT_MISMATCHED_TYPE_OF_ARG alarm because the first argument's type of 'ReactDOM.render()' method should be a renderable react child.
document.getElementById('root')
);Compliant Code Example
View with noncompliant examples side by sideimport React from 'react';
import ReactDOM from 'react-dom';
// Example 1
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { greetName: 'hi' };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ greetName: 'bye' });
}
render() {
return <div onClick={this.handleClick}>{this.state.greetName}</div>;
}
}
// Example 2
const hi = <div key={'hi'}>hi</div>;
const bye = <div key={'bye'}>bye</div>;
ReactDOM.render(
[hi, bye],
document.getElementById('root')
);Version
This rule was introduced in DeepScan 1.5.0-beta.
See
React Error: setState(…): takes an object of state variables to update or a function which returns an object of state variables.
React Error: Objects are not valid as a React child (found: object with keys {hi, bye}). If you meant to render a collection of children, use an array instead.