title: React - Cannot set property of undefined
body: <p>I have a React component that uses querySelectorAll to get the value of elements on the page then renders them in the component. With the code below I am getting the error 'Cannot set property of 'label1' of undefined', but i'm not sure why as it's finding the value correctly using the querySelector and this.label1 is a global variable.</p>
  
  <pre><code>import React from 'react'
  
  class StickyNav extends React.Component {
  
    setLabels (labels) {
      const [ label1, label2 ] = labels
      if (!label1 || !label2) return
      this.label1 = label1.textContent
      this.label2 = label2.textContent
    }
  
    getQuery (query, callback) {
      const el = document.querySelectorAll(query)
      if (!el) return
      if (callback) callback(el)
    }
  
    shouldComponentUpdate (nextProps, nextState) {
      if (this.state.fixed !== nextState.fixed) {
        this.getQuery('#navBar .form-group label', this.setLabels)
        return true
      }
      return false
    }
  
    render () {
      return (
        &lt;div&gt;
          &lt;div className='form-group'&gt;
            &lt;label htmlFor='choice1'&gt;&lt;h4&gt;{this.label1}:&lt;/h4&gt;&lt;/label&gt;
            &lt;span id='choice1'&gt; &amp;nbsp;text&lt;/span&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;label htmlFor='choice2'&gt;&lt;h4&gt;{this.label2}:&lt;/h4&gt;&lt;/label&gt;
            &lt;span id='choice2'&gt; &amp;nbsp;text&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default StickyNav
  </code></pre>