Not able to maintain "isOpen" status.

[DespuesLeeWallace]

The question is simple. I am trying to set a dictionary with existing "isOpen" keys, so that I can control which nodes are open/closed.

This is the basic example where I set a dict with "isOpen" keys to false, however, whenever I refresh it the tree renders all nodes expanded.

import FolderTree from "react-folder-tree";
import my-data from "./data-test.json";
import React, { useState} from "react";

const BasicTree = () => {
  const [treeState, setTreeState] = useState(my-data);
  console.log(treeState);
  return (
    <>
      <FolderTree data={treeState} />
    </>
  );
};

export default BasicTree;

This comes from a more complex setup, where I receive a JSON from an api and set the new directoryTree using useState. The problem is that the FolderTree does not preserve the open/close status from the previous render, so now I am reading the previous status and manually setting the "isOpen" attributes to maintain that state. However, it still does not work. It renders the whole tree open. Minimal example:

import React, { useState, useEffect, useRef } from "react";
import readValue from "./api";
import FolderTree from "react-folder-tree";

const MyDirectory = () => {
  const { dirTree, setDirTree } = useState();
 
  const onValueReceived = (value) => {
    console.log("Value recived: " + JSON.stringify(value));
    setDirTree(value);
  };

  const onTreeStateChange = (state, event) => {};

  const onNameClick = ({ defaultOnClick, nodeData }) => {
    defaultOnClick();
    const {
      path,
      name,
      checked,
      isOpen,
      // custom data
    } = nodeData;

   
    readValue(name)
      .then((value) => onValueReceived(value))
      .catch((e) => {console.log(e)});
  };


  return( {
    dirTree ? (
      <FolderTree
        data={dirTree}
        onNameClick={onNameClick}
        onChange={onTreeStateChange}
      />
    ) : (
      <></>
    );});

export default MyDirectory;

My question is:
How can I preserve the open/closed state of the nodes when updating the tree state?

[DespuesLeeWallace]

Nevermind, I found that I should use initOpenStatus and:

 const onTreeStateChange = (state, event) => {
    if (JSON.stringify(state) !== JSON.stringify(dirTree)) {
      setDirTree(state);
    }
  };

To keep the tree updated

Sorry for the trouble.

[ojhawkins]

I get this error when I set initOpenStatus='custom' as per the docs.

[shunjizhan]

@ojhawkins when you use initOpenStatus='custom', you will have to provide valid open status for all children. For example

const treeState = {
  name: 'root [half checked and opened]',
  checked: 0.5,   // half check: some children are checked
  isOpen: true,   // this folder is opened, we can see it's children
  children: [
    { name: '', checked: 0 },
    {
      name: '',
      checked: 0.5,
      isOpen: false,
      children: [
        { name: '', checked: 0 },
        { name: '', checked: 1 },
      ],
    },
  ],
};

please double check your state, for example, if some of the children is checked, and some unchecked, the parent should be half check (0.5)

[ojhawkins]

Ok I worked out what I was doing wrong, I had isOpen props on the leaf nodes 😅.