title: Any help for checkbox tree in React?
body: <p>I am new to React. Sorry for question. I want to create a checkbox tree in React with below <code>db.json</code> file. How can I create it? I found something in <code>react-checkbox-tree</code> in NPM but when I checked one item all items becomes selected. </p>
  
  <p>I did everything as mentioned in the npm page of <code>react-checkbox-tree</code> but it didn't work.</p>
  
  <pre><code>  {
      "mailProcessingCenters": [
        {
          "code": "AIAXAA",
          "name": "ANGUILLA"
        }
      ],
      "code": "J1CA18",
      "shortCode": "A18",
      "shortName": "AnguillaPost"
    },
    {
      "mailProcessingCenters": [],
      "code": "J1CADA",
      "shortCode": "ADA",
      "shortName": "AndorraPost"
    },
    {
      "mailProcessingCenters": [
        {
          "code": "AEAUHA",
          "name": "ABU DHABI"
        },
        {
          "code": "AEDXBA",
          "name": "DUBAI"
        },
        {
          "code": "AEDXBB",
          "name": "DUBAI RASID SEA-PORT"
        },
        {
          "code": "AEDXBD",
          "name": "DUBAI TRANSIT / HUB"
        },
        {
          "code": "AEDXBE",
          "name": "DUBAI - SOMALIA"
        },
        {
          "code": "AUSYDK",
          "name": "SYDNEY K (EMIRATES - DIRECT LINK)"
        },
        {
          "code": "GBLONO",
          "name": "LONDON"
        },
        {
          "code": "SGSINO",
          "name": "SINGAPORE"
        },
        {
          "code": "SGSINQ",
          "name": "SINGAPORE Q, UAE"
        },
        {
          "code": "USCHIE",
          "name": "CHICAGO E"
        },
        {
          "code": "USJECU",
          "name": "NEW JERSEY U EMIRATES POST"
        }
      ],
      "code": "J1CAEA",
      "shortCode": "AEA",
      "shortName": "EmiratesPost"
    },
    {
      "mailProcessingCenters": [
        {
          "code": "AFKBLA",
          "name": "KABUL"
        },
        {
          "code": "AFKBLC",
          "name": "KABUL C"
        },
        {
          "code": "AFKBLS",
          "name": "KABUL EMS SHAHEEN POST"
        }
      ],
      "code": "J1CAFA",
      "shortCode": "AFA",
      "shortName": "Afghan Post"
    }
  ]  
  </code></pre>
  
  <p><strong>Here is my App component:</strong> </p>
  
  <pre><code>    import React from 'react';
      import db from './assets/data.json'
      import CheckboxTree from 'react-checkbox-tree';
      import 'react-checkbox-tree/src/less/react-checkbox-tree.less';
      import DataTable from 'react-data-table-component';
  
  
      const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' },
      { id: 2, title: 'XXXX', year: '1984' }];
  
      const columns = [
        {
          name: 'Title',
          selector: 'title',
          sortable: true,
        },
        {
          name: 'Year',
          selector: 'year',
          sortable: true,
          right: true,
        },
      ];
  
  
      class App extends React.Component {
        state = {
          checked: [],
          expanded: [],
          database : db
  
        }
  
  
        render() {
  
          return (
            &lt;div &gt;
              &lt;DataTable
                title="Arnold Movies"
                columns={columns}
                data={data}
              /&gt;
  
  
              &lt;CheckboxTree
                nodes={this.state.database}
                key={this.state.database.code}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked =&gt; this.setState({ checked })}
                onExpand={expanded =&gt; this.setState({ expanded })}
  
              /&gt;
  
              ))
            }
            &lt;/div&gt;
          )
        }
  
      }
      export default App;
  
  
  
  </code></pre>