Form elements should be either controlled or uncontrolled
This rule applies when a form element such as<input>,<textarea>, and<select> works as both controlled and uncontrolled element.
The followings are controlled elements whose values are controlled by React state and associated handler functions:
value prop.<input> element of typeradio orcheckbox haschecked prop.In contrast, the followings are uncontrolled elements with the initial values:
defaultValue prop.<input> element of typeradio orcheckbox hasdefaultChecked prop.Therefore, a form element should not have bothvalue anddefaultValue props. Also,<input> element should not have bothchecked anddefaultChecked props. React outputs a warning message if you set both props for a form element.
| Noncompliant Code Example | Compliant Code Example | ||
|---|---|---|---|
| 1 | import React from 'react'; | 1 | import React from 'react'; |
| 2 | 2 | ||
| 3 | export class FormExample extends React.Component { | 3 | export class FormExample extends React.Component { |
| 4 | constructor(props) { | 4 | constructor(props) { |
| 5 | super(props); | 5 | super(props); |
| 6 | this.state = {value: ''}; | 6 | this.state = {value: 'DeepScan'}; |
| 7 | 7 | ||
| 8 | this.handleChange = this.handleChange.bind(this); | 8 | this.handleChange = this.handleChange.bind(this); |
| 9 | this.handleSubmit = this.handleSubmit.bind(this); | 9 | this.handleSubmit = this.handleSubmit.bind(this); |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | handleChange(event) { | 12 | handleChange(event) { |
| 13 | this.setState({value: event.target.value}); | 13 | this.setState({value: event.target.value}); |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | handleSubmit(event) { | 16 | handleSubmit(event) { |
| 17 | alert('The submitted value: ' + this.state.value); | 17 | alert('The submitted value: ' + this.state.value); |
| 18 | event.preventDefault(); | 18 | event.preventDefault(); |
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | render() { | 21 | render() { |
| 22 | return ( | 22 | return ( |
| 23 | <form onSubmit={this.handleSubmit}> | 23 | <form onSubmit={this.handleSubmit}> |
| 24 | <label> | 24 | <label> |
| 25 | Name: | 25 | Name: |
| 26 | <input type="text" value={this.state.value} defaultValue="DeepScan" onChange={this.handleChange} /> {/* REACT_MISUSED_CONTROLLED_COMPONENT alarm because 'input' element should be either controlled or uncontrolled. */} | 26 | <input type="text" value={this.state.value} onChange={this.handleChange} /> |
| 27 | </label> | 27 | </label> |
| 28 | <input type="submit" value="Submit" /> | 28 | <input type="submit" value="Submit" /> |
| 29 | </form> | 29 | </form> |
| 30 | ); | 30 | ); |
| 31 | } | 31 | } |
| 32 | } | 32 | } |
import React from 'react';export class FormExample extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('The submitted value: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} defaultValue="DeepScan" onChange={this.handleChange} /> {/* REACT_MISUSED_CONTROLLED_COMPONENT alarm because 'input' element should be either controlled or uncontrolled. */} </label> <input type="submit" value="Submit" /> </form> ); }}import React from 'react';export class FormExample extends React.Component { constructor(props) { super(props); this.state = {value: 'DeepScan'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('The submitted value: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); }}This rule was introduced in DeepScan 1.8.0-beta.
React Warning: FormExample contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info:https://fb.me/react-controlled-components