ReactJS error warning

Question

I'm creating my first application with ReactJS and I found this warning when I run my code :

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.

Can someone tell me how I fix it please ?

Answer 1

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 }  /> 

const { render } = ReactDOM;    class Demo extends React.Component {    constructor(props) {      super(props);            this.state = {        checked: true      };            this.checkboxHandler = this.checkboxHandler.bind(this);    }        checkboxHandler(e) {      this.setState({        checked: e.target.checked      });    }        render() {      return (        <input          type="checkbox"          checked={ this.state.checked }          onChange={ this.checkboxHandler }         />      );    }  }    render(    <Demo />,    document.getElementById('demo')  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>    <h1>The Checkbox</h1>    <div id="demo"></div>

Uncontrolled Components

---

Attributes needed:

defaultValue - <input> (not checkbox or radio), <select>, <textbox> or defaultChecked for (checkbox or radio).

---

React sets the initial value using defaultValue or defaultChecked, and the update of the element's state is controlled by the user, usually via the DOM using refs.

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