Recursive deep tree

[PiotrSnelewski]

Hi all,

I'm really stuck with the problem. I have a deep menu. First level item opens up the second level items after click. The problem is that next levels do not react on state change. I don't know if the "late" type could be a problem. Everyting is described in the code:
https://codesandbox.io/s/mobx-state-tree-recursive-deep-menu-p7eqj

Thanks in advance

[EmilTholin]

Hi @PiotrSnelewski!

Your MST stores looks reasonable! You must also make sure that TreeItem is made into an observer right away, so that the recursive uses of the component are observers as well and not just the exported one.

import { observer } from "mobx-react-lite";
import React from "react";

const TreeItem = observer((props) => {
  const handleClick = () => {
    props.item.active ? props.item.deactivate() : props.item.activate();
  };

  return (
    <React.Fragment>
      <li onClick={handleClick}>{props.item.id}</li>
      {props.item.active && (
        <ul>
          {Array.from(props.item.children.values()).map((child) => (
            <TreeItem key={child.id} item={child} />
          ))}
        </ul>
      )}
    </React.Fragment>
  );
});

export default TreeItem;

[PiotrSnelewski]

Many thanks :) I was struggling with this for almost two days.