How to insert properties and functions inside ref?

Question

How can I insert properties and functions inside a ref? Like this example:

const MyComponent = () => {

    const [loading, setLoading] = React.useState(false)
    const onTest = () => 'works'

    return (
        <div {...props}>
    )
}

Then I want to use the propertie loading and the function onTest that way:

const Test = () => {

    const myRef = React.useRef()

    React.useEffect(() => {

        if (myRef.current)
            alert('loading is ' + myRef.current.loading + ' function is ' + myRef.current.onTest())
    })

    return(
        <MyComponent ref={myRef} />
    )
}

How can I do that?

Answer 1

You cannot set ref on functional components because they don't have an instance.

You may not use the ref attribute on function components because they don’t have instances.

(source: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs)

To make your example working you need to convert <MyComponent /> to class component.

const Test = () => {
  const myRef = React.useRef();

  React.useEffect(() => {
    if (myRef.current)
      console.log(
        "loading is " +
          myRef.current.state.loading +
          " function is " +
          myRef.current.onTest()
      );
  });

  return <MyComponent ref={myRef} />;
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  onTest() {
    return "works";
  }

  render() {
    return <h1>MyComponent</h1>;
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>