Collapse node problem with next js
eshad opened this issue · comments
Node Collapse Problem
After integrating into next app node collapses after hitting check
2nd time attempts of expanding node makes checkbox uncheck again...
Getting checked or expanded values accurately
Codesandbox
This is how i tried to solve: Sandbox
Expected Output of this to get nodes exact value with checked
Node Object:
const nodes:any = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
}];
State controlling:
let [state, setState]:any = useState([{
checked: [],
expanded: [],
}]);
Component placement:
<CheckboxTree
nodes={nodes}
iconsClass="fa5"
optimisticToggle
showExpandAll
checked={state.checked}
expanded={state.expanded}
onExpand={expanded => setState((e)=>[...state, {expanded: e} ])}
onCheck={checked => setState([(c)=> [...state, {checked: c}])}
/>
Your CodeSandbox example does not render the initial tree. When I modified it do to so, I noticed that you were losing the selected
or checked
state value by not merging with the previous state.
See my modification of your CodeSandbox here, which works as expected.