Forward Ref (React) | Chinese Rule of Eight

ref – https://reactjs.org/docs/forwarding-refs.html

Here is a step-by-step explanation of what happens in the example:

We create a React ref by calling React.createRef and assign it to a ref variable.

We pass our ref down to <FancyButton ref={ref}> by specifying it as a JSX attribute.

React passes the ref to the (props, ref) => ... function inside forwardRef as a second argument.

We forward this ref argument down to <button ref={ref}> by specifying it as a JSX attribute.

When the ref is attached, ref.current will point to the <button> DOM node.

const FancyButton = React.forwardRef((props, ref) => (

{props.children}

</button>

));

// You can now get a ref directly to the DOM button:

const ref = React.createRef();

<FancyButton ref={ref}>Click me!</FancyButton>;