need help with using elements array in a custom node handler

Hi, I have a custom node with a plus button attached to the node. I want the button to add a new node right below the one with the plus.

I’m creating the handler in the same way as in your example, Custom node example

This issue is that, for me to add a Node, I have to pass the addNode helper an array of the elements state, but because of the way the handler is passed, elements is always equal to [] (because of closures, the function is passed only when it goes through the useEffect, and thus captures it’s surrounding scope at that time).

Do you have any idea about how to use the elements array state in a custom node handler ? Thank you for your help

[MatthieuJnon]

Thank you so much, I’ve been coding with hooks for > 1 year, and I didn’t event know you could pass a function to the set state method… Thank you for your reactivity and for your help

[moklick]

You can pass a function to setElements like we are doing it in our custom node example. The first parameter is the current elements value. Then you could do:

const handleAddChild = node => {
    setElements(els => {
      // do something with els
      
      return els;
    });
  };

Or you could receive the current elements with the way described above and pass it to the handleAddChildfunction:

import { useStoreState } from 'react-flow-renderer';

const StartNode = props => {
  const elements = useStoreState(state => state.elements); 

  return (
    <>
      <span>Start of your form</span>
      <Icon name="plus circle" onClick={() => props.data.onAddChild(elements, props)} />
    </>
  );
};