title: Changing style property with setState in React
body: <p>I feel a bit ashamed to ask you about that because I believe it is quite straightforward to solve this issue and it is basic. But still I stuck on this. </p>
  
  <p>I would like to change my styles, for ex. my backgroundColor, of my div when onscroll event fires, but this seems to be not working. 
  While trying to set it like this backgroundColor:this.state.backgroundColor,
  the error appears: Cannot read property 'state' of undefined</p>
  
  <p>Thanks in advance!</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Header extends Component {
      constructor(props) {
          super(props);
          this.state = {
              backgroundColor: 'black',
          };
      }
  
      componentDidMount() {
          const headerElement = this.refs.header;
          const sticky = headerElement.offsetTop;
          window.addEventListener('scroll', () =&gt; this.handleScroll(sticky)); 
      }
  
      handleScroll(sticky) {
          if (window.pageYOffset &gt;= sticky) {
              this.setState({
                  backgroundColor: 'yellow'
              });
          }
      }
  
      render() {
          const { containerStyle } = styles;
          return (
              &lt;header style={containerStyle} ref='header'&gt; {this.props.text} &lt;/header&gt;
          );
      }
  }
  
  const styles = {
      containerStyle: {
          backgroundColor: this.state.backgroundColor,
      }
  };
  
  export default Header;
  </code></pre>