React, call a grandchild component's function from a grandparent component

[crude yew]

I have a component, inside another component, inside another component. I want to call the innermost component's function from the outermost component. How do you do that?

[steady tulip]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fierce nest]

Hi, you could use react portals or maybe a context api to do that
Could you give an example of what you want to do?
Sometimes, just a code reorganization can help you with that

[echo oar]

Exactly if what you need is calling the innermost Component's function you can do that by pure composition

Make the middle child take children:

function OuterMostComponent() {
    const [value1, setValue1] = useState("");
    const [value2, setValue2] = useState("");
  // ...whatever
  return (
    <div>
      <MiddleComponent propsFromOutermost={value1}>
        <InnerMostComponent propsFromOutermost={value2} />
      </MiddleComponent>
    </div>
  );
}

function MiddleComponent({ children, propsFromOutermost}) {
  // ...whatever
  //  children will be the InnerMostChild component
  return <div>{children}</div>;
}

function InnerMostComponent({ propsFromOutermost}) {
  // ...whatever
  return <div>{/* ... */}</div>;
}