Home>
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
  • 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}>        )
        }