TypeError: Cannot set property of null

Hey, I’m trying out 3.4. I got pretty far but just hit this nasty bug and can’t figure it out after a few hours of fighting with it so I’m just giving up.

// app.ts
const [state, actions] = useLocalStore<IFoo>({
  selectElement: action((_state, id) => {
    const oldSelectedNode = getSelectedNode(_state.nodes);
    oldSelectedNode.selected = false;
    const newSelectedNode = getNodeById(_state.nodes, id); // this returns null even though unit tests with mocked data work
    newSelectedNode.selected = true; // fails because null.selected
  }),
});
// ...
return <RecursiveElement nodes={state.nodes} actions={actions} />;

// RecursiveElement.ts
import { Element } from 'my-styled-components';

// ...
<Element
  // @ts-ignore
  as={node.tag}
  key={node.id}
  node={node} // pass this on to the styled-component
  onClick={(e) => {
    e.stopPropagation();
    console.log(node.id); // 🕵️‍♂️ works
    actions.selectElement(node.id); // 💩🛏
  }}
>
  {!!node.nodes.length && (
    <RecursiveElement nodes={node.nodes} actions={actions} />
  )}
</Element>;

Use case:

• I have a recursive component (rendering out a tree).
• When I click a component, I want to set ALL nodes to have “selected = false” and the clicked on component to get set to “selected: true”

What I’m trying:

• set store using useLocalStore within <Wrapper>
• pass state and actions to a child [of <Wrapper>] component
• in the child component, hit a utility function that steps through the tree figuring out what the selected node is, and also the node to get by ID.

Seems like a race condition. I’d try to debug it longer if the entire thing wasn’t mangled in whatever that proxy stuff is… 😩

[ctrlplusb]

#0618

😊

[corysimmons]

In Discord, need the #1234 as well