Home>

javascript : How to pass reference from child component to parent?

Parent.tsx
const Parent: React.FunctionComponent= ()=> {
**Here you need to get a link to work with it
    return (
    <Child/>    )
}
Child.tsx
}
const Child: React.FunctionComponent= ()=> {
    const ref= React.createRef()
    return (
    <div ref={ref.current}>    )
}

reactjs.org/dox/lifting-article-pack.html

entithat2022-01-21 15:07:09

pass a simple function that changes the state of the parent

entithat2022-01-21 15:08:04
javascript reactjs typescript
  • Answer # 1

    Any data that needs to be passed "up" is passed by passing it to a function that is passed from the parent component.

    Parent.tsx

    const Parent: React.FunctionComponent= ()=> {
        const [childRef, setChildRef]= useState(null);
        return (
           <Child setRef={setChildRef} />        )
    }
    Child.tsx
    const Child: React.FunctionComponent= ({ setRef })=> {
        const ref= React.createRef()
        useEffect(()=> {
           setRef(ref);
        }, [ref]);
        return (
           <div ref={ref.current}>        )
    }
  • Answer # 2

    Any data that needs to be passed "up" is passed by passing it to a function that is passed from the parent component.

    Parent.tsx

    const Parent: React.FunctionComponent= ()=> {
        const [childRef, setChildRef]= useState(null);
        return (
           <Child setRef={setChildRef} />        )
    }
    Child.tsx
    const Child: React.FunctionComponent= ({ setRef })=> {
        const ref= React.createRef()
        useEffect(()=> {
           setRef(ref);
        }, [ref]);
        return (
           <div ref={ref.current}>        )
    }