title: Undefined when accessing this.props in react component with redux
body: <p>I am having the following issue where I have created a component in React where I am mainly trying to use the <code>this.props.dispatch()</code> method. However when I try to referring to this.props in a function that I have created I get an error in console saying the following.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'dispatch' of undefined</p>
  </blockquote>
  
  <p><strong>Question:</strong> Why cannot use <code>this.props</code> in a function I added myself e.g. <code>handleResize()</code> when <code>this.props</code> is available for default react functions such as <code>componentWillMount(), componentDidMount(),</code></p>
  
  <p>This is the function that causes the error as mentioned above.</p>
  
  <pre><code>handleResize() {
          console.log( "handle function getting called" );
          this.props.dispatch( changeListHeight( window.innerHeight ) );
      }
  </code></pre>
  
  <p>Here is my full react component</p>
  
  <pre><code>import React, {Component} from 'react';
  import Avatar from 'material-ui/Avatar';
  import List from 'material-ui/List/List';
  import ListItem from 'material-ui/List/ListItem';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import { connect } from "react-redux";
  import { fetchMessages } from '../actions/messageActions';
  import { changeListHeight } from '../actions/appActions';
  
  
  import {
      blue300,
      indigo900,
      orange200,
      deepOrange300,
      pink400,
      purple500,
  } from 'material-ui/styles/colors';
  
  @connect((store) =&gt; {
      return {
          messages: store.messages.messages,
          app: store.app
      };
  })
  class Items extends Component {
  
      constructor(props) {
          super(props);
          this.props.dispatch( changeListHeight( window.innerHeight ) );
      }
  
      componentWillMount() {
          this.props.dispatch( fetchMessages() );
      }
  
      componentDidMount() {
          console.log( this.props );
          window.addEventListener('resize', this.handleResize ); //event to handle resizing the message list
          this.refs.chatList.onscroll = function() { this.handleScroll }; //event to keep the freshest messages in view
      }
  
      handleResize() {
          console.log( "handle function getting called" );
          this.props.dispatch( changeListHeight( window.innerHeight ) );
      }
  
      handleScroll() {
          console.log( "handle function getting called" );
          //console.log(this.refs.chatList);
          //let isScrolledToBottom = this.chatList.scrollHeight - this.chatList.clientHeight &lt;= this.chatList.scrollTop + 1;
      }
  
      render() {
  
          let listStyle = {
              height: (this.props.app.chatListHeight - (35 + 64 + 8 + 135)),
              overflowY: "auto"
          }
  
          let listItemStyle = {
              margin: 5,
          };
  
          return (
               &lt;MuiThemeProvider&gt;
                  &lt;List className="chat-list" style={listStyle} ref="chatList"&gt;
                      {this.props.messages.map(function(message){
                          return &lt;ListItem
                              key={message.id}
                              disabled={true}
                              leftAvatar={
                                  &lt;Avatar
                                      color={deepOrange300}
                                      backgroundColor={purple500}
                                      size={30}
                                      style={listItemStyle}
                                  &gt;
                                  {message.name.charAt(0)}
                                  &lt;/Avatar&gt;
                              }&gt;
                              {message.msg}
                          &lt;/ListItem&gt;;
                      })}
                  &lt;/List&gt;
               &lt;/MuiThemeProvider&gt;
          );
      }
  }
  
  export default Items;
  </code></pre>