How do I pass things between components on the same level?

Question

I've got a React app of the form:

<App>
  <ParentComponent>
    <FormComponent>
    <AnotherComponent>
  </ParentComponent>
</App>

I want to be able to update some state values of <FormComponent> by clicking on elements in <AnotherComponent>.

I don't want to place them inside each other, but keep them side-by-side. I don't want to lift up <FormComponent> state as it's nicely encapsulated.

What's the best way to achieve this? Can I do it with just react or do I need RxJS/something else?

Answer 1

The data in React Flows Down.

If you don't want to lift the state up, what's left is Context API or any state management library like Redux and MobX (both implement Context API with different strategy).

But still, the state is "above" FormComponent (you still lifting state up).

const Context = React.createContext();

const ParentComponent = () => {
  const contextState = useState(DEFAULT_STATE);
  return (
    <Context.Provider value={contextState}>
      <FormComponent />
      <AnotherComponent />
    </Context.Provider>
  );
};

const FormComponent = () => {
  const [, setState] = useContext(Context);
  // use setState
};

const AnotherComponent = () => {
  const [state] = useContext(Context);
  // valid state updated from FormComponent
};