title: React Ref: Uncaught TypeError: Cannot set property 'innerHTML' of null
body: <p>I have these refs in my constructor</p>
  <pre><code>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();
  }
  </code></pre>
  <p>And this is my componentDidMount</p>
  <pre><code>  componentDidMount() {
      console.log('ComponentDidMount Start');
      if (this.state.modalType === 'lensTintsBlokz') {
        this.getLensTintSwatches('blokz');
      } else {
        this.setState({ lensTintsTabsContainerHidden: false });
        this.getLensTintSwatches('sunglasses');
      }
    }
  </code></pre>
  <p>In the getLensTintSwatches function - this is being called in componentDidMount</p>
  <pre><code>this.lensTintStandardSwatchesContainer.current.innerHTML = '';
  this.lensTintMirrorSwatchesContainer.current.innerHTML = '';
  </code></pre>
  <p>I'm getting the following error.</p>
  <p><strong><code>Uncaught TypeError: Cannot set property 'innerHTML' of null</code></strong></p>
  <p>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?</p>
  <blockquote>
  <p>UPDATE: I'm passing <code>ref={this.xyxRef}</code> as prop in the respective
  elements.</p>
  <p>Another observation-  The console.log in componentDidMount is not
  triggered, based on other console errors</p>
  </blockquote>
  <p>This is the flow:</p>
  <pre><code>Constructor -&gt; Render -&gt; Constructor -&gt; Render -&gt; This ERROR
  </code></pre>