CODEWITHSUNDEEP
javascriptarraysreactjsobjectcheckbox
sujon
sujon

Reputation: 367

how to select All checkbox based group in reactjs

I did initial state for select single checkbox .Here is my intial state

     this.state = {
          fruites: [
            { id: 1 , value: "banana", isChecked: false },
            { id: 2, value: "apple", isChecked: false },
            { id: 3,value: "mango", isChecked: false },
            { id: 4, value: "grap", isChecked: false }
          ]
        };
      }

Method: I just this for selected all checkbox

      handleAllChecked = id => event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          data.filter(item => 
              fruite.isChecked = event.target.checked;

          });
        });
        this.setState({ fruites: fruites });
      };

I just this method for individual checkbox .

      handleCheckChieldElement = event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          if (fruite.value === event.target.value)
            fruite.isChecked = event.target.checked;
        });
        this.setState({ fruites: fruites });
      };

Render:Here is my UI, I want to select All checkbox based on group . For example , I have got two group of value - such as Group , Topgroup. The problem is that , When I click on the group , it will select All checkbox including Topgroup and also I click banana , it will select all banana , I don't want to get all banana when click on one item. I don't to want to get topgroup checkbox when I select on the group. 

            {[{ id: 1, name: "group" }, { id: 2, name: "topGropup" }].map(item => (
              <div>
                <input
                  type="checkbox"
                  onChange={this.handleAllChecked(item.id)}
                  value="checkedall"
                />{" "}
                {item.name}
                <ul>
                  {this.state.fruites.map((fruite, index) => {
                    return (
                      <CheckBox
                        key={index}
                        handleCheckChieldElement={this.handleCheckChieldElement}
                        {...fruite}
                      />
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>

How can I resolve this problem . Here is my codesanbox : https://codesandbox.io/s/react-multi-select-checkbox-or6ko

Upvotes: 0

Views: 1528

Answers (2)

Omer
Omer

Reputation: 3486

Memory pointer to the same list

The groups in the app have the same pointer to memory list of fruits.

because of that the updates will affect on both groups.

See how I fixed it:

https://codesandbox.io/s/react-multi-select-checkbox-r29d1

I found some things in the app that can be improve so I improve them for example:

label to input checkbox to be able to click also on the text

I am here if you have any problem, I suggest you to learn Hooks.

Upvotes: 1

Nicolas SEPTIER
Nicolas SEPTIER

Reputation: 851

Here, I edited your codesandbox: https://codesandbox.io/s/react-multi-select-checkbox-bbuky

Basically you have 8 checkboxes, even though its 4 items displayed, duplicated for each group.

I added the 4 missing items in your state, but you'd actually want some kind of factory function that lets you create your state given the groups you have.

I had to edit some of your values since you were relying on stuff that now is not unique anymore, like value and use the group's id for example to create a unique identifier groupId-itemId.

Upvotes: 1

Related Questions