ReactJS error warning ReactJS error warning reactjs reactjs

ReactJS error warning


React has 2 ways of working with form controls - Controlled Components and Uncontrolled Components

You get this warning when you don't supply the element neither the attributes needed for controlled nor those needed for an uncontrolled component:

Warning: Failed form propType: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. Check the render method of Login.

Controlled Components


Attributes needed:

  1. value - <input> (not checkbox or radio), <select>, <textbox> or checked for (checkbox or radio).
  2. onChange

React handles the condition of the element by updating the value or checked attribute (depending on the element) from the props or the state. We need to notify react when we make a change, like inserting data, or checking the box, so react can update the element's condition when it rerenders the component. To do so, we must include an onChange handler, in which we will update the state or notify the component's parent, so it will update the props.

<input  type="checkbox"  checked={ this.props.checked }  onChange={ this.checkboxHandler } />