Skip to content

Latest commit

 

History

History
42 lines (33 loc) · 1.63 KB

no-mix-controlled-with-uncontrolled.md

File metadata and controls

42 lines (33 loc) · 1.63 KB
Raw

react-form-fields/no-mix-controlled-with-uncontrolled

Forbid to specify both value/checked and defaultValue/defaultChecked props to form fields

  • ⭐️ This rule is included in plugin:react-form-fields/recommended preset.

Form elements must be either controlled or uncontrolled (specify either the value/checked prop, or the defaultValue/defaultChecked prop, but not both). Decide between using a controlled or uncontrolled form element and remove one of these props.

Rule Details

Examples of incorrect code:

let Hello = <input />;
let Hello = <input type="text" value="test" />;
let Hello = <input type="text" defaultValue="test" />;
let Hello = <input type="checkbox" checked={true} />;
let Hello = <input type="checkbox" defaultChecked={true} />;
let Hello = <input type="radio" checked={true} />;
let Hello = <input type="radio" defaultChecked={true} />;
let Hello = <textarea />;
let Hello = <textarea value="test" />;
let Hello = <textarea defaultValue="test" />;
let Hello = <select />;
let Hello = <select value="test" />;
let Hello = <select defaultValue="test" />;

Examples of correct code:

let Hello = <input type="text" value="test" defaultValue="test" />;
let Hello = <input type="checkbox" checked={true} defaultChecked={true} />;
let Hello = <input type="radio" checked={true} defaultChecked={true} />;
let Hello = <textarea value="test" defaultValue="test" />;
let Hello = <select type="text" value="test" defaultValue="test" />;

Implementation