How to select default checkbox as selected in reactjs

Question

I need to default checkbox as selected . Forexample , I have got output

{permission:{group:["can_view"],"topGroup":["can_update"]}} .

I send to database and database gives me sending data and I want to display sending data from database when I go for edit .

I just want to default checkbox as selected based my output.

Here is my intitialState

    const group = ["group", "top"];
const groupItems = ["Apple", "Pear", "Orange"];
    this.state = {
      permission: {}
    };

  UNSAFE_componentWillMount() {
    this.setDefault(false);
  }

  setDefault = fill => {
    const temp = {};
    group.forEach(x => (temp[x] = fill ? groupItems : []));
    this.setState({ permission: temp });
  };
  checkLength = () => {
    const { permission } = this.state;
    let sum = 0;
    Object.keys(permission).forEach(x => (sum += permission[x].length));
    return sum;
  };


  isTotalIndeterminate = () => {
    const len = this.checkLength();
    return len > 0 && len < groupItems.length * group.length;
  };
  onCheckTotalChange = () => e => {
    this.setDefault(e.target.checked);
  };
  isTotalChecked = () => {
    return this.checkLength() === groupItems.length * group.length;
  };

these method is work for each group such as here is my two roles - one is group and another is topGroup.

  isIndeterminate = label => {
    const { permission } = this.state;
    return (
      permission[label].length > 0 &&
      permission[label].length < groupItems.length
    );
  };
  onCheckAllChange = label => e => {
    const { permission } = this.state;
    const list = e.target.checked ? groupItems : [];
    this.setState({ permission: { ...permission, [label]: list } });
  };
  isAllChecked = label => {
    const { permission } = this.state;
    return !groupItems.some(x => !permission[label].includes(x));
  };

/** * these method is work for single item such as can_view,can_delete,can_update */

 isChecked = label => {
    const { permission } = this.state;
    return permission[label];
  };

  onChange = label => e => {
    const { permission } = this.state;
    this.setState({ permission: { ...permission, [label]: e } });
  };

Render(UI)

 <Checkbox
          indeterminate={this.isTotalIndeterminate()}
          onChange={this.onCheckTotalChange()}
          checked={this.isTotalChecked()}
        >
          Check Total
        </Checkbox>
        {group.map(label => (
          <div key={label}>
            <div className="site-checkbox-all-wrapper">
              <Checkbox
                indeterminate={this.isIndeterminate(label)}
                onChange={this.onCheckAllChange(label)}
                checked={this.isAllChecked(label)}
              >
                Check all
              </Checkbox>
              <CheckboxGroup
                options={groupItems}
                value={this.isChecked(label)}
                onChange={this.onChange(label)}
              />
            </div>
          </div>
        ))}

How can I select checkbox as selected in reactjs? Here is codesanbox : https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-rsnjt?fontsize=14&hidenavigation=1&theme=dark

when I click on checkbox , I got some output {permission:{group:["can_view"],"topGroup":["can_update"]}} .I send this database , but when I want to view , I need to show selected checkbox — sujon
– sujon, Commented Mar 20, 2020 at 16:53

keikai · Accepted Answer · 2020-03-20 16:54:15Z

1

Pass it as props, and directly set them to state would be fine.

const group = ["group", "topGroup"];
const groupItems = ["can_view", "can_update", "Orange"];

const App = () => {
  const permission = {
    group: ["can_view"],
    topGroup: ["can_update"]
  };
  return <Content permission={permission} />;
};

class Content extends React.Component {
  ...
  componentDidMount() {
    this.setState({ permission: this.props.permission });
  }

Ps: although directly set props to state may not be the best practice, still, I think it fits your demand at this moment

answered Mar 20, 2020 at 16:54

keikai

15.3k10 gold badges56 silver badges73 bronze badges

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

2 Comments

sujon Over a year ago

I have been facing another problem is that when I loading a data from database , I got an error that is includes is undefined , but static data is absolutely okh. isAllChecked = label => { const { permission } = this.state; return !groupItems.some(x => !permission[label].includes(x)); };

sujon Over a year ago

can you look this stackoverflow.com/questions/60779821/…

Collectives™ on Stack Overflow

How to select default checkbox as selected in reactjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related