How to access ref that was set in render

user_9682760 0
Viewed 893

Hi I have some sort of the following code:

class First extends Component {
 constructor(props){super(props)}

 myfunction = () => { this.card //do stuff}

 render() {
  return(
  <Component ref={ref => (this.card = ref)} />
 )}
}

Why is it not possible for me to access the card in myfunction. Its telling me that it is undefined. I tried it with setting a this.card = React.createRef(); in the constructor but that didn't work either.

react-native reactjs javascript
2 Answers

Try this <Component ref={this.card} />

user_108999790

You are almost there, it is very likely that your child Component is not using a forwardRef, hence the error (from the React docs). ref (in a similar manner to key) is not directly accesible by default:

const MyComponent = React.forwardRef((props, ref) => (
  <button ref={ref}>
    {props.children}
  </button>
));

// ☝️ now you can do <MyComponent ref={this.card} />

ref is, in the end, a DOMNode and should be treated as such, it can only reference an HTML node that will be rendered. You will see it as innerRef in some older libraries, which also works without the need for forwardRef in case it confuses you:

const MyComponent = ({ innerRef, children }) => (
  <button ref={innerRef}>
    {children}
  </button>
));

// ☝️ now you can do <MyComponent innerRef={this.card} />

Lastly, if it's a component created by you, you will need to make sure you are passing the ref through forwardRef (or the innerRef) equivalent. If you are using a third-party component, you can test if it uses either ref or innerRef. If it doesn't, wrapping it around a div, although not ideal, may suffice (but it will not always work):

render() {
  return (
    <div ref={this.card}>
      <MyComponent />
    </div>
  );
}

Now, a bit of explanation on refs and the lifecycle methods, which may help you understand the context better.

Render does not guarantee that refs have been set:

This is kind of a chicken-and-egg problem: you want the component to do something with the ref that points to a node, but React hasn't created the node itself. So what can we do?

There are two options:

1) If you need to pass the ref to render something else, check first if it's valid:

render() {
  return (
    <>
      <MyComponent ref={this.card} />
      { this.card.current && <OtherComponent target={this.card.current} />
    </>
  );
}

2) If you are looking to do some sort of side-effect, componentDidMount will guarantee that the ref is set:

componentDidMount() {
  if (this.card.current) {
      console.log(this.card.current.classList);
  }
}

Hope this makes it more clear!

user_83169080
Related