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ß, Sep 10 '20 at 19:51
@JohannesKlauß Yes, the refs are attached to their respective elements. How do I verify if my JSX was rendered? — Nik, Sep 10 '20 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ß, Sep 11 '20 at 07:27

score 3 · Answer 1 · answered Sep 10 '20 at 20:11

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 '20 at 20:11

Eusbolh

116
3

I'm passing the refs just like you mentioned and making it a functional component is not an option. – Nik Sep 10 '20 at 20:20
Are you able to reproduce the case in CodeSandbox? – Eusbolh Sep 10 '20 at 20:31
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. – Nik Sep 10 '20 at 21:57
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: https://stackoverflow.com/a/50019873/10917390 – Eusbolh Sep 11 '20 at 15:44

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

1 Answers1