How to set checkbox component checked in Material-UI React?

Question

As the title,
I want to set checkbox "checked" by default when the page was fully load,
but in the tutorial about Material-UI Checkbox component, didn't have the defaultChecked props.
When I add checked={true} props, then get arror like
"A component is changing an uncontrolled input of type checkbox to be controlled...etc"
How should I do?

there is my code
I want to list all the group, include the default group and the other let the user to choose multi group.

  export default class AcceptButton extends Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {open: true}
  }
  handleChange = event => {
    this.setState({checked: event.target.checked})
  }
  render() {
    return (
      <Fragment>
       <div>
         group : 
       </div>
       <div className="f-col">
       {
        group.data.map(g => {
          if (data.filter(d => d.gid == g.gid).length != 0) {
            return (
              <FormControlLabel
                key={g.gid}
                control={
                  <Checkbox
                    disabled={true}
                    onChange = {this.handleChange}
                    color="primary"
                    checked={this.state.open}
                  />
                }
                label={g.gname}
              />
          )}
          else {
            return (
              <FormControlLabel
                key={g.gid}
                control={
                  <Checkbox
                    onChange={this.handleChange}
                    value={g.gname}
                    color="primary"
                  />
                }
                label={g.gname}
              />
          )}
        })
      }
    </div> 
    <button className="btn" onClick={this.postassignhandle}>update</button>
  </Fragment>
)

Shayan Moghadam · Accepted Answer · 2020-05-05 09:22:13Z

12

it does have a defaultChecked props and you can use it like :

<Checkbox defaultChecked={true} 
          onChange={this.handleChange}
          color="primary"
 />

edited May 5, 2020 at 9:22

answered May 3, 2020 at 7:51

Shayan Moghadam

2,0702 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tommi L. Over a year ago

I tried this but then React gives me a warning:

Warning: ForwardRef(SwitchBase) contains an input of type checkbox with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

Shayan Moghadam Over a year ago

@TommiL. yeah right , probably when you use defaultChecked prop ,checked prop is not necessarily to use and using defaultChecked and checked props at same time has a Intervening for React to manage the checkbox , so you should remove one of them , Thank you for your comment

AxeEffect Over a year ago

I wonder why this prop doesn't appear on the Checkbox documentation.

Kuba Over a year ago

Using defaultChecked instead of passing a value to checked results in error: MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized.

Shadab Ahmed · Accepted Answer · 2019-02-25 18:25:45Z

1

Made checkboxstate a maps type

const checkboxstatemap = new Map()
export default class AcceptButton extends Component {
constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)

    this.state = {checkboxstate: group.data.map((item) =>  checkboxstatemap.set(item.gid, true ))}
}

componentDidMount() {
handleChange = event => {
    this.setState({checked: event.target.checked})
}
render() {
    return (
    <Fragment>
    <div>
        group : 
    </div>
    <div className="f-col">
    {
        group.data.map(g => {
        if (data.filter(d => d.gid == g.gid).length != 0) {
            return (
            <FormControlLabel
                key={g.gid}
                control={
                <Checkbox
                    disabled={true}
                    onChange = {this.handleChange}
                    color="primary"
                    checked={this.state.checkboxstate.get(g.gid)}
                />
                }
                label={g.gname}
            />
        )}
        else {
            return (
            <FormControlLabel
                key={g.gid}
                control={
                <Checkbox
                    onChange={this.handleChange}
                    value={g.gname}
                    color="primary"
                />
                }
                label={g.gname}
            />
        )}
        })
    }
    </div> 
    <button className="btn" onClick={this.postassignhandle}>update</button>
</Fragment>
)

edited Feb 25, 2019 at 18:25

answered Feb 25, 2019 at 6:21

Shadab Ahmed

57610 silver badges20 bronze badges

3 Comments

honeytoast Over a year ago

But I can't know how many checkbox should have. So set state to all checkbox can't work I think.

Shadab Ahmed Over a year ago

@honeytoast is your gid field sequential ?

honeytoast Over a year ago

No, it doesn't.

kiruba · Accepted Answer · 2019-02-25 06:09:49Z

1

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

class Checkboxes extends React.Component {
  state = {
    checkedBox: true,
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.checkedBox}
          onChange={this.handleChange('checkedBox')}
          value="checkedBox"
        />
      </div>
    );
  }
}

Try this.

answered Feb 25, 2019 at 6:09

kiruba

395 bronze badges

Comments

Zach Yu · Accepted Answer · 2019-09-22 05:28:51Z

import React, { useCallback, useState } from 'react';
import { Checkbox, FormControlLabel } from '@material-ui/core';

const defaultProps = {
    margin: 'normal',
    onChange: (e) => {}
};
const InputCheckbox = (props) => {
    const { onChange, label, value=false, name, checkedIcon, icon, className, style } = props;

    const [ isChecked, setChecked ] = useState(value);
    const _onChange = useCallback(
        (e) => {
            setChecked((value) => {
                onChange(e, { [e.target.name]: !value });
                return !value;
            });
        },
        [ onChange ]
    );
    return <FormControlLabel className={className} style={style} label={label} control={<Checkbox name={name} icon={icon} checkedIcon={checkedIcon} checked={isChecked} onChange={_onChange} />} />;
};
InputCheckbox.defaultProps = defaultProps;
export default InputCheckbox;

use onChange to callback value and use value to do initialize

Jose Guerra · Accepted Answer · 2023-01-24 23:09:35Z

0

youst must add attribute checked inc component, sometimes use value but don`t work always use checked attribute.

<Checkbox onChange={this.handleChange}
          color="primary"
          checked={this.state.checked}
 />

edited Jan 24, 2023 at 23:09

answered Jan 24, 2023 at 23:09

Jose Guerra

11 bronze badge

3 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Ahmed Sbai Over a year ago

sometimes use value but don`t work always use checked attribute can you explain ?

Jose Guerra Over a year ago

yeah, use checked is de functional mode then value don't work

Nipun Chathuranga · Accepted Answer · 2024-04-15 10:18:33Z

0

"When I add checked={true} props, then get error like" In react you cant add constant values like checked={true} you have use state variables so it will help react rendering process. ex:-

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

<Checkbox ...
          checked={checked}
 />

answered Apr 15, 2024 at 10:18

Nipun Chathuranga

813 bronze badges

Collectives™ on Stack Overflow

How to set checkbox component checked in Material-UI React?

6 Answers 6

4 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related