CODEWITHSUNDEEP
javascriptreactjs
Randa
Randa

Reputation: 689

ReactJS error warning

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 ?

Upvotes: 54

Views: 75387

Answers (6)

DINA TAKLIT
DINA TAKLIT

Reputation: 8388

For those who are using react material ui and react-hook-form. the proper way to create a controlled checkbox is

import { useForm, Controller } from "react-hook-form";
import {
  Checkbox,
  FormControlLabel,
} from "@mui/material";

const { handleSubmit, control } = useForm()
...

<Controller
  control={control}
  name={`${item.id}`}
  defaultValue={!!evaluationDimensions?.[item.id]?.selected} 
  render={({ field: { onChange, value } }) => (
    <FormControlLabel
      control={
        <Checkbox
          checked={value}
          onChange={onChange}
        />
      }
    />
  )}
/>
...

Make sure to defaultValue whenever you use checked={value} to prevent issues such

React warning MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized

Upvotes: 1

Pouria
Pouria

Reputation: 1

If your confronting with this warning, You can add "readOnly" to your input. like this code:

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } readOnly />
</div>

Or You can add an onChange event like an empty arrow function or what kind of function you care about to your input. like this:

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } onChange={() => {}} />
</div>

Also you must care about the value property, too. This solution fixed my issue with the same warning, hope to be useful.

Upvotes: 0

Aaron Miller
Aaron Miller

Reputation: 185

For those that prefer a Functional Component instead of a Class Component this Controlled Component approach is simple and easy to implement. If you don't know what a Controlled Component is then please refer to @Ori Drori's well explained answer in this thread.

import {useState} from "react";

export default function YourComponentName(){

  const [checked, setChecked] = useState(true);

  return (
    <>
          <input
            type="checkbox"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
    </>
  );
};

Upvotes: 3

Ori Drori
Ori Drori

Reputation: 191916

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

Upvotes: 63

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

The defaultChecked may not be updated if the component is re-rendered in future so use this approach with caution.

You may be better off just using a blank function to remove the warning. Especially if you want to handle click on the whole div which includes the checkbox and the associated text. 

<div onClick={this.handleClick}>
  <input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
  {this.props.text}
</div>

Upvotes: 48

t1m0n
t1m0n

Reputation: 3431

You need to add defaultChecked attribute to your checkbox:

<div>
    <input type='checkbox' defaultChecked />
</div>

Upvotes: 46

Related Questions