React js map and filter

Question

Showing list of checkboxes and I have to show checkbox status based on array data onload

reference code

AllGroups      = [{id:1, name:one},{id:2,name:two},{id:3, name:three},{id:4,name:four}]
userCatChecked = [{id:2,name:two},{id:3, name:three}]

Checkbox status should show true/false based on userCatChecked array matching

<form>
{this.state.AllGroups((item, index) => {

      //  Here need condition 
      // if( item.id === userCatChecked.id  ) {
      // show true checkbox
      //}else{
      // show false checkbox
      //}


   <input type="checkbox" checked={true/false} onChange={ } />
})}
</form>

AllGroups is Array, you can't call it

Kostya Tresko
– Kostya Tresko

2020-03-19 07:00:29 +00:00
Commented Mar 19, 2020 at 7:00 — Kostya Tresko
– Kostya Tresko, Commented Mar 19, 2020 at 7:00
Didnt understand , code is for just reference

Hunter
– Hunter

2020-03-19 07:03:45 +00:00
Commented Mar 19, 2020 at 7:03 — Hunter
– Hunter, Commented Mar 19, 2020 at 7:03

Burak Gavas · Accepted Answer · 2020-03-19 07:08:05Z

1

<form>
    {this.state.AllGroups.map((item, index) => 
       <input
           type="checkbox"
           checked={!!this.state.userCatChecked.find(cat => cat.id === item.id)}
           onChange={ }
       />
    )}
</form>

answered Mar 19, 2020 at 7:08

Burak Gavas

1,3421 gold badge11 silver badges12 bronze badges

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

2 Comments

Hunter Over a year ago

working fine but , but checkbox status not changing when i click

Burak Gavas Over a year ago

You should provide an onChange function

Diamond · Accepted Answer · 2020-03-19 07:10:33Z

1

How about this?

You can use Array.some function to check if the object array contains an item.

const AllGroups      = [{id:1, name:'one'},{id:2,name:'two'},{id:3, name:'three'},{id:4,name:'four'}]
const userCatChecked = [{id:2,name:'two'},{id:3, name:'three'}]

const result = AllGroups.map((item, index) => {
  const checked = userCatChecked.some(checked => checked.id === item.id);
  return {...item, checked};
});
console.log('result:', result);

So

{this.state.options.AllGroup((item, index) => {
  const checked = userCatChecked.some(checked => checked.id === item.id);
  return <input type="checkbox" checked={checked} onChange={} />;
})}

answered Mar 19, 2020 at 7:10

Diamond

3,4905 gold badges21 silver badges43 bronze badges

1 Comment

Hunter Over a year ago

I didnt try this , I tested with below answer thats worked well , thanks for your help

Qubaish Bhatti · Accepted Answer · 2020-03-19 07:42:36Z

0

One another way to handle checkboxes is through Map

const userCatChecked = [{id:2,name:'two'},{id:3, name:'three'}];
const checkedItems = new Map();
userCatChecked.map(data => checkedItems.set(data.name, true))

And then in your form

<form>
    {this.state.AllGroups.map((item, index) => 
       <input
           type="checkbox"
           checked={checkedItems.get(item.name)}
           onChange={ }
       />
    )}
</form>

May be this will also help :)

answered Mar 19, 2020 at 7:42

Qubaish Bhatti

7486 silver badges23 bronze badges

Collectives™ on Stack Overflow

React js map and filter

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related