Skip to content
Advertisement

How to insert properties and functions inside ref?

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?

Advertisement

Answer

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>
Advertisement