title: How to convert class based component into function based component?
body: <p>Right now I have a class-based component but I want to convert my component into function-based. The code is below here.
  I have select all checkbox written in a class-based component. but now I want to convert that component into function-based, I have changed all the methods and props into my code but there is some error of state. I am not getting a possible error.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'antd/dist/antd.css';
  import './index.css';
  import { Checkbox } from 'antd';
  
  const CheckboxGroup = Checkbox.Group;
  
  const plainOptions = ['Apple', 'Pear', 'Orange'];
  const defaultCheckedList = ['Apple', 'Orange'];
  
  class App extends React.Component {
    state = {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
    };
  
    onChange = checkedList =&gt; {
      this.setState({
        checkedList,
        indeterminate: !!checkedList.length &amp;&amp; checkedList.length &lt; plainOptions.length,
        checkAll: checkedList.length === plainOptions.length,
      });
    };
  
    onCheckAllChange = e =&gt; {
      this.setState({
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="site-checkbox-all-wrapper"&gt;
            &lt;Checkbox
              indeterminate={this.state.indeterminate}
              onChange={this.onCheckAllChange}
              checked={this.state.checkAll}
            &gt;
              Check all
            &lt;/Checkbox&gt;
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;CheckboxGroup
            options={plainOptions}
            value={this.state.checkedList}
            onChange={this.onChange}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('container'));
  
  now I am converting my component into function-based. but having an issue. Can anybody suggest me the possible mistake, please ... the checkbox is showing all options but unable to check the box or cant check all options at once. Can anybody suggest me some answer so I can solve my issue?
  
  import React, {useState} from 'react';
  import ReactDOM from 'react-dom';
  import 'antd/dist/antd.css';
  import './index.css';
  import { Checkbox } from 'antd';
  
  const CheckboxGroup = Checkbox.Group;
  
  const plainOptions = ['Apple', 'Pear', 'Orange'];
  const defaultCheckedList = ['Apple', 'Orange'];
  
  function App (props) {
    state = {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
    };
  
    const onChange = checkedList =&gt; {
      this.setState({
        checkedList,
        indeterminate: !!checkedList.length &amp;&amp; checkedList.length &lt; plainOptions.length,
        checkAll: checkedList.length === plainOptions.length,
      });
    };
  
    const onCheckAllChange = e =&gt; {
      this.setState({
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    };
  
  
      return (
        &lt;div&gt;
          &lt;div className="site-checkbox-all-wrapper"&gt;
            &lt;Checkbox
              indeterminate={this.state.indeterminate}
              onChange={this.onCheckAllChange}
              checked={this.state.checkAll}
            &gt;
              Check all
            &lt;/Checkbox&gt;
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;CheckboxGroup
            options={plainOptions}
            value={this.state.checkedList}
            onChange={this.onChange}
          /&gt;
        &lt;/div&gt;
      );
  
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('container'));
  </code></pre>