React Ref: Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

I have these refs in my constructor

constructor(props) {
    super(props);

    //All Refs
    this.sunglassesTintsTab = React.createRef();
    this.gradientTintsTab = React.createRef();
    this.fashionTintsTab = React.createRef();
    this.lensTintStandardSwatchesContainer = React.createRef();
    this.lensTintMirrorSwatchesContainer = React.createRef();
}

And this is my componentDidMount

  componentDidMount() {
    console.log('ComponentDidMount Start');
    if (this.state.modalType === 'lensTintsBlokz') {
      this.getLensTintSwatches('blokz');
    } else {
      this.setState({ lensTintsTabsContainerHidden: false });
      this.getLensTintSwatches('sunglasses');
    }
  }

In the getLensTintSwatches function - this is being called in componentDidMount

this.lensTintStandardSwatchesContainer.current.innerHTML = '';
this.lensTintMirrorSwatchesContainer.current.innerHTML = '';

I'm getting the following error.

Uncaught TypeError: Cannot set property 'innerHTML' of null

I have tried both the standard React.createRef() and callback style ref but the current value of all the refs is returning null. What am I doing wrong here?

UPDATE: I'm passing ref={this.xyxRef} as prop in the respective elements.

Another observation- The console.log in componentDidMount is not triggered, based on other console errors

This is the flow:

Constructor -> Render -> Constructor -> Render -> This ERROR

Did you attach the refs to actual elements? Also keep in mind that the elements have to be rendered for the ref to be set. This cannot be always guaranteed so it is best to check for the refs existence. — Johannes Klauß
– Johannes Klauß, Commented Sep 10, 2020 at 19:51
@JohannesKlauß Yes, the refs are attached to their respective elements. How do I verify if my JSX was rendered? — Nik
– Nik, Commented Sep 10, 2020 at 20:11
Then either the ref is not attached or the element hasn't rendered yet. So you have to set the ref at a later time. — Johannes Klauß
– Johannes Klauß, Commented Sep 11, 2020 at 7:27

Eusbolh · Accepted Answer · 2020-09-10 20:11:14Z

3

The most likely reason why you are getting the error is that your refs are not attached to a DOM element. If you are not trying to attach these refs to a DOM element, that means that you didn't set the initial values of your refs. Either way, the error says that your refs' values are null somehow. So, you can either:

Pass your refs into an html element (e.g. <div ref={myRef} />), then React will automatically set your ref's .current property to the corresponding DOM node.
Give an initial value to your refs. (As far as I know, you are not able to give an inital value to refs with createRef. You might need to convert your component into a functional component and then you can use useRef hook to give initial value to your refs.)

To have more info about refs, I suggest you to read the React's official documentation about refs.

answered Sep 10, 2020 at 20:11

Eusbolh

1263 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nik Over a year ago

I'm passing the refs just like you mentioned and making it a functional component is not an option.

Eusbolh Over a year ago

Are you able to reproduce the case in CodeSandbox?

Nik Over a year ago

It's work code so I can't replicate the depth of the component as it's dependent on a bunch of stuff. I wish StackOverflow had a zoom call option for help.

Eusbolh Over a year ago

If you are sure that you attached your refs correctly, check the cases that refs might not be attached at mount. I strongly suggest you to look at this answer: stackoverflow.com/a/50019873/10917390

Collectives™ on Stack Overflow

React Ref: Uncaught TypeError: Cannot set property 'innerHTML' of null

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related