checkboxtree - How can I do the tree checkbox list with Checkbox in ReactJS?

Question

I used to create a tree structure with a checkbox from three breakdowns. However, when we select the upper unit in the structure I have created, it has to select all sub-units, but it is not possible in this structure. How can I do it in both recursive and tree logic.

const CheckBoxTree = (props) => {
  const itemOptions = props.options;
  const [checkedItems, setCheckedItems] = useState(itemOptions);
  const [selectedValues, setSelectedValues] = useState({ selectedItem: [] });
  const [isPropReady, setIsPropReady] = useState(false);

  const chekboxIdCode = (name) => {
    return props.id + name;
  };
  useEffect(() => {
    if (props.value.length > 0 && !isPropReady) {
      selectedValues.selectedItem = props.value;
      props.value.forEach((item, i) => {
        const id = chekboxIdCode(item);
        setCheckedItems((checkedItems) => ({ ...checkedItems, [id]: true }));
      });
      setIsPropReady(true);
    }
  }, [props.value]);

  useEffect(() => {
    let target = {
      id: props.id,
      name: props.id,
      value: selectedValues.selectedItem,
    };
    props.onClick(target);
  }, [selectedValues.selectedItem]);

  const handleChange = (event,sellector) => {
    const id = event.target.id;
    const checked = event.target.checked;
    const value = parseInt(event.target.value);
    setCheckedItems({
      ...checkedItems,
      [id]: checked,
    });
    if (checked) {
      setSelectedValues({
        selectedItem: [...selectedValues.selectedItem, value],
      });
    } else {
      let remove = selectedValues.selectedItem.indexOf(value);
      setSelectedValues({
        selectedItem: selectedValues.selectedItem.filter(
          (_, i) => i !== remove
        ),
      });
    }
  };
  return (
    <div className={"col-md-12"}>
      {props.error && (
        <label
          id={props.name + "-error"}
          className="error-label mb-3"
          htmlFor={props.name}
        >
          {props.error}
        </label>
      )}
      <ul className={"list-menu"}>
        {itemOptions.map((option,index_1) => (
          <li key={chekboxIdCode(option[props.optionValue])}>
            <CheckBox
              id={chekboxIdCode(option[props.optionValue])}
              checked={checkedItems[chekboxIdCode(option[props.optionValue])]}
              label={option[props.optionLabel]}
              onClick={(e)=>handleChange(e,`[${index_1}]`)}
              className={"col-md-12 pt-1 pb-1"}
              value={option[props.optionValue]}
            />
            <ul>
              {option.content &&
                option.content.map((subOptionOne,index_2) => {
                  return (
                    <li key={chekboxIdCode(subOptionOne[props.optionValue])}>
                      <CheckBox
                        id={chekboxIdCode(subOptionOne[props.optionValue])}
                        checked={
                          checkedItems[
                            chekboxIdCode(subOptionOne[props.optionValue])
                          ]
                        }
                        label={subOptionOne[props.optionLabel]}
                        onClick={(e)=>handleChange(e,`[${index_1}]["content"][${index_2}]`)}
                        className={"col-md-12 pt-1 pb-1"}
                        value={subOptionOne[props.optionValue]}
                      />
                      {subOptionOne.content &&
                        subOptionOne.content.map((subOptionTwo,index_3) => {
                          return (
                            <li
                              key={chekboxIdCode(
                                subOptionTwo[props.optionValue]
                              )}
                              className="ml-4"
                            >
                              <CheckBox
                                id={chekboxIdCode(
                                  subOptionTwo[props.optionValue]
                                )}
                                checked={
                                  checkedItems[
                                    chekboxIdCode(
                                      subOptionTwo[props.optionValue]
                                    )
                                  ]
                                }
                                label={subOptionTwo[props.optionLabel]}
                                onClick={(e)=>handleChange(e,`[${index_1}]["content"][${index_2}]["content"][${index_3}]`)}
                                className={"col-md-12 pt-1 pb-1"}
                                value={subOptionTwo[props.optionValue]}
                              />
                            </li>
                          );
                        })}
                    </li>
                  );
                })}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CheckBoxTree;

I don't want to use components in this structure. For this reason, I want to create my own component, can you present your solution suggestions in this direction?

question from:https://stackoverflow.com/questions/66059585/how-can-i-do-the-tree-checkbox-list-with-checkbox-in-reactjs

Answer 1

Waitting for answers