Checkbox treeview not checked in react

Question

I have followed below example to create a treeview checkbox.

example

Its using extends component. But My code i need to use a class. So i have created and data also loading no issue. But when i tried to onchecked its not working.

const stateLod = {
    checked: [],
    expanded: [],
    data : [],  
    setDataLoad:null
}

checkboxtree code

       <CheckboxTree    
                    nodes={listItems}
                    iconsClass="fa5"
                    checked={stateLod.checked}
                    data={classData}
                    onCheck={(checked) => 
                     stateLod.checked={checked}
                      } 
       /> 

Anyone have an idea to fix this one

also I tried this way.

function setCheckedNodes(checked){ 
    return true;
}

 <CheckboxTree    
  nodes={listItems}
  iconsClass="fa5"
  checked={stateLod.checked}
  data={classData}
  onCheck={(checked) => setCheckedNodes(checked)}
  } 
 /> 

Answer 1

In order to re-render the tree after toggling, you need to use state. The example code uses state in a class, while you seem to be using hooks, except you forgot to make checked items a state too:

import { useState } from "react";

function MyComponent() {
    const [checked, setChecked] = useState([]);

    return (
        <CheckboxTree
            nodes={listItems}
            iconsClass="fa5"
            checked={checked}
            data={classData}
            onCheck={setChecked}
        /> 
    );
}