title: How to fetching data from react.js before render compontents and Cannot read property 'includes' of undefined?
body: <p>I have got two components, child components and parent components.</p>
  
  <p>Here is data format is coming from database :</p>
  
  <pre><code> {permissible_objects :["group", "topGroup"],all_permissions: ["can_view","can_create"]}
  </code></pre>
  
  <p>I am going to pass data from parent component to child components . when I pass data parent to child compontent I got an error that is</p>
  
  <pre><code> TypeError: Cannot read property 'includes' of undefined
  </code></pre>
  
  <p>However, I saw data in the console.log(). Where is the problem of typeError can not undefined ? If I worked with static data, There is no problem . Everyting is worked perfectly . </p>
  
  <ul>
  <li><p>app.js(parent compontent)    </p>
  
  <pre><code>    &lt;UserPermission
        userPermissionList={this.state.userPermissionList}
      /&gt;
  </code></pre></li>
  </ul>
  
  <p>This is my child components (UserPermission.js)</p>
  
  <pre><code>     state = {
        permission: {}
  
      };
    UNSAFE_componentWillMount() {
      this.setState({
        userPermissionList: this.props.userPermissionList,
        groupItems:
          this.props.userPermissionList &amp;&amp;
          this.props.userPermissionList.all_permissions &amp;&amp;
          this.props.userPermissionList.all_permissions.map(item =&gt; item.value)
      });
      this.setDefault(false);
    }
  
    setDefault = fill =&gt; {
      const temp = {};
      this.state.userPermissionList &amp;&amp;
        this.state.userPermissionList.permissible_objects &amp;&amp;
        this.state.userPermissionList.permissible_objects.forEach(
          x =&gt; (temp[x] = fill ? this.state.groupItems : [])
        );
      this.setState({ permission: temp });
    };
    checkLength = () =&gt; {
      const { permission } = this.state;
      let sum = 0;
      Object.keys(permission).forEach(x =&gt; (sum += permission[x].length));
      return sum;
    };
  
    isTotalIndeterminate = () =&gt; {
      const len = this.checkLength();
      return len &gt; 0 &amp;&amp; len &lt; this.state.groupItems.length * group.length;
    };
    onCheckTotalChange = () =&gt; e =&gt; {
      this.setDefault(e.target.checked);
    };
    isTotalChecked = () =&gt; {
      return this.checkLength() === this.state.groupItems.length * group.length;
    };
  </code></pre>
  
  <p>these method is work for each group such as here is my two roles - one is group and another is topGroup.</p>
  
  <pre><code>  isIndeterminate = label =&gt; {
      const { permission } = this.state;
      // undefined !== theHref &amp;&amp; theHref.length
      return permission[label] &amp;&amp; permission[label].length !== undefined
        ? permission[label].length &gt; 0 &amp;&amp;
            permission[label].length &lt; this.state.groupItems.length
        : null;
    };
    onCheckAllChange = label =&gt; e =&gt; {
      const { permission } = this.state;
      const list = e.target.checked ? this.state.groupItems : [];
      this.setState({ permission: { ...permission, [label]: list } });
    };
    isAllChecked = label =&gt; {
      const { permission } = this.state;
      console.log(label);
      return !this.state.groupItems.some(x =&gt; !permission[label].includes(x));
    };
  </code></pre>
  
  <p>/** * these method is work for single item such as can_view,can_delete,can_update */</p>
  
  <pre><code>  isChecked = label =&gt; {
      const { permission } = this.state;
      return permission[label];
    };
  
    onChange = label =&gt; e =&gt; {
      const { permission } = this.state;
      this.setState({ permission: { ...permission, [label]: e } });
    };
  </code></pre>
  
  <p>Here is three checkbox </p>
  
  <p>Rendering UI :</p>
  
  <p>this is going to selected All checkbox .</p>
  
  <pre><code>          &lt;Checkbox
              indeterminate={this.isTotalIndeterminate()}
              onChange={this.onCheckTotalChange()}
              checked={this.isTotalChecked()}
            &gt;
              All
            &lt;/Checkbox&gt;
  </code></pre>
  
  <p>this is worked for group based checkbox</p>
  
  <pre><code>          {permissible_objects &amp;&amp;
              permissible_objects.slice(0, 3).map((label, index) =&gt; (
  
                      &lt;label&gt;{label}&lt;/label&gt;
  
                        &lt;Checkbox
                          indeterminate={this.isIndeterminate(label)}
                          onChange={this.onCheckAllChange(label)}
                          checked={this.isAllChecked(label)}
                        &gt;
                          {label}
                        &lt;/Checkbox&gt;
  </code></pre>
  
  <p>this is worked for singe checkbox</p>
  
  <pre><code>                    &lt;CheckboxGroup
                        options={this.state.groupItems}
                        value={this.isChecked(label)}
                        onChange={this.onChange(label)}
                      /&gt;
  
              ))}
  </code></pre>
  
  <p>How can I resolve Cannot read property 'includes' of undefined ?</p>