0

I have a parent component in which I use a component imported from a library. The component library from which I imported the child component uses another package. I'm trying to call a function present in that component. I have tried using ref but I found that its not being passed down. Is there any way i can do this? Its sort of like this.

const ParenComponent = () => {
    return (
        <>
            {/* imported from library */}
            <ChildComponent />
        </>
    );
};

const ChildComponent = () => {
    // no ref passed down to grandchild component
    return (
        <>
            <GrandChild />
        </>
    );
};

const GrandChild = () => {
    const ref = useRef(null);
    const logSomething = () => {
        ref.current.someFunction();
    };

    return (
        <>
            <div />
        </>
    );
};
Arjun Vinod
  • 11
  • 1
  • 3
    Using a React ref is how you'd accomplish this. Generally you need to forward refs. https://reactjs.org/docs/forwarding-refs.html – Drew Reese Jul 21 '21 at 06:09
  • check this out: https://stackoverflow.com/questions/37949981/call-child-method-from-parent?rq=1 – arash esmaealbeigi Jul 21 '21 at 06:16
  • The problem is I actually can't make any changes to the child components its installed as a node module. – Arjun Vinod Jul 21 '21 at 06:19
  • 2
    Well, it's rather difficult for us to help you if we can't see the ***actual*** code you've an issue with. What is the child component? What is the 3rd-party library? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese Jul 21 '21 at 07:16

0 Answers0