How can I access "treeState" out of nodeRenderer function as a globally?

[dgreene1]

Please take this question to stack overflow since it’s a general react question.

[mt-deva]

I'll leave an example for others to learn from @yashrabari

function FileTree({ data }) {
  // tree state in global
  const [currentTreeState, setCurrentTreeState] = useState<ITreeViewState>();

  // useCallback so we dont create a new anon function for every item
  const handleUpdate = useCallback((treeState) => {
    setCurrentTreeState(treeState);
  }, []);

  return (
    <TreeView
        data={data}
        nodeRenderer={({ element, treeState }) => {    
        // update state on every click
        return (<button onClick={() => handleUpdate(treeState)>{element.name}</span>);
        }}
     />

    // the state is now available in the outer component
        <Button onClick={() => console.log(currentTreeState)}>Log Current Tree State</Button>
    </div>
</div>
  );
}