Cannot read property 'includes' of undefined in reactjs?

Question

I try to resolve includes undefined, For that, I am using && operator.

 isAllChecked = label => {
    const { permission } = this.state;

     false value - I need false value when I get data from API,
     But I got an error that includes undefined. for that, I used && operator
     but I got a true value, I don't need to get true value

      const data = !groupItems.some(
      x => !permission && !permission[label] && !permission[label].includes(x)
    );

    // console.log(true) //true

    const data = !groupItems.some(
      x => !permission[label].includes(x)
    );

   // I got a false value using static data without using && operator

  // data output: false (accepted output- getting using static data, but  I need 
   to get the same value when I get data from API, I got an error includes undefined without using && operator)

    return data;

  };

However, If I got data from API, this method is displayed can not read property undefined and when I am going to resolve 'includes' of undefined, I used && operator and I got true value.

 Cannot read property 'includes' of undefined.

I don't need true value, I need false value for the initially mounted component.

my question is that how can I resolve Cannot read property 'includes' of undefined by using && operator or anything.
Here is my code sandbox: https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-um18k

yeah, it works when I used static data , but when I used API , The method doesn't work because includes undefined. — sujon
– sujon, Commented Mar 21, 2020 at 14:10
for resolve I used && operator , but I got a true value .However using static data , I got false value . — sujon
– sujon, Commented Mar 21, 2020 at 14:10
try this. i think it is working const data = groupItems.every( x => permission && permission[label] && permission[label].includes(x) ); — xdeepakv
– xdeepakv, Commented Mar 21, 2020 at 14:17

xdeepakv · Accepted Answer · 2020-03-21 14:21:49Z

1

Instead of some, you can use every to check all.

isAllChecked = label => {
    const { permission } = this.state;
    const data = groupItems.every(
      x => permission && permission[label] && permission[label].includes(x)
    );
    return data;
  };

answered Mar 21, 2020 at 14:21

xdeepakv

8,1452 gold badges25 silver badges35 bronze badges

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

2 Comments

sujon Over a year ago

when I click on checkbox my output should be this format {permission:{group:["1","2"]}} and also if I click second one my output should be this format {permission:{group:["1","2"]},topgroup:["1"]}. currently , I see two default objects like this by using intital state {permission:{group:[]},topgroup:[]}. I don't need to get initial state like this {permission:{group:[]},topgroup:[]}. I just want to add data when user click on checkbox. how can I remove initial state ?

sujon Over a year ago

stackoverflow.com/questions/60790181/…

Collectives™ on Stack Overflow

Cannot read property 'includes' of undefined 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