jakezatecky / react-checkbox-tree

A simple and elegant checkbox tree for React.

Home Page:https://jakezatecky.github.io/react-checkbox-tree/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Checkbox not checked in issue

niku2021 opened this issue · comments

I tried this sample without extend component. So i need to get onchecked event using const value like below. I am new to react But my requirement to not use extend component.

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

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

Do you any suggestion for this issue,

also I tried this way.

function setCheckedNodes(checked){ 
    return true;
}

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

When you say your requirement is to not use an "extend component", do you mean not using a React class? A simple functional example of using this component would be the following (see live example):

import React, { useState } from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';

const nodes = [{
  value: 'mars',
  label: 'Mars',
  children: [
    { value: 'phobos', label: 'Phobos' },
    { value: 'deimos', label: 'Deimos' },
  ],
}];

function Widget() {
  const [checked, setChecked] = useState([]);
  const [expanded, setExpanded] = useState([]);

  return (
    <CheckboxTree
      iconsClass="fa5"
      nodes={nodes}
      checked={checked}
      expanded={expanded}
      onCheck={(checked) => setChecked(checked)}
      onExpand={(expanded) => setExpanded(expanded)}
    />
  );
}

export default Widget;

Thank you very much!