react access child function

1const { forwardRef, useRef, useImperativeHandle } = React;
2
3// We need to wrap component in `forwardRef` in order to gain
4// access to the ref object that is assigned using the `ref` prop.
5// This ref is passed as the second parameter to the function component.
6const Child = forwardRef((props, ref) => {
7
8  // The component instance will be extended
9  // with whatever you return from the callback passed
10  // as the second argument
11  useImperativeHandle(ref, () => ({
12
13    getAlert() {
14      alert("getAlert from Child");
15    }
16
17  }));
18
19  return <h1>Hi</h1>;
20});
21
22const Parent = () => {
23  // In order to gain access to the child component instance,
24  // you need to assign it to a `ref`, so we call `useRef()` to get one
25  const childRef = useRef();
26
27  return (
28    <div>
29      <Child ref={childRef} />
30      <button onClick={() => childRef.current.getAlert()}>Click</button>
31    </div>
32  );
33};
34
35ReactDOM.render(
36  <Parent />,
37  document.getElementById('root')
38);