Example does not completely work with React Hooks

[GaelS]

When adapting the example using useState to store the cursor value, I experienced issue. I could just expand a element but not close it right after.

By naively displaying a console.log in a useEffect hook with no dependencies (which is then called on every update), I realized that no rerender was done despite going through the onToggle function.

To "fix" that, I simplify cursor object inside the state and replace it by a boolean which switches from true to false as soon as onToggle is called. This way, the component is rerendered correctly.

Extract of my code:

const [cursor, setCursor] = useState(false);
  const data = useRef(props.data);

  function onToggle(node, toggled) {
    node.active = true;
    if (node.children) {
      node.toggled = toggled;
    }
  //switch boolean
    setCursor(!cursor);
  }
  return (
      <Treebeard data={data.current} onToggle={onToggle} />)

Would an update of the example relevant or what I am doing is a nonsense ?

[maximilianoforlenza]

Hi @GaelS I fix this refreshing the data. here is my example: https://codesandbox.io/s/7jkkj5vkn1

[GaelS]

Yes that works too, a different way to force a rerendering. Either ways seem hacky though :/

[maximilianoforlenza]

I'll refactor this code. I close this issue.

Thanks!