title: When accessing props of a component "this" is unedefined after mapping state to props
body: <p>While using react-redux and mapping state to props with connect() the received state has the correct values but when accessing the variables through this.props "this" is always undefined.</p>
  
  <p>When pressing the button (in there for test purposes only) on the sidebar component the second console log always fails with TypeError: Cannot read property 'props' of undefined  on console.log(this.props.visibility).</p>
  
  <p>Am i missing something extra that is needed in order to allow access of the newly maped values in mapStateToProps through this.props ? or even if i should be accessing them in another way other then this.props.</p>
  
  <p>Thanks in advance.</p>
  
  <p>The component</p>
  
  <pre><code>import React, { Component } from 'react';
  import {connect} from 'react-redux';
  import {toggleSidebarVisibility } from '../../actions/layoutActions';
  
  
  class Sidebar extends Component{
  
      render(){
        return(
          &lt;div&gt;
            &lt;button class='btn btn-secondary' onClick={test}&gt;B&lt;/button&gt;
          &lt;/div&gt;      
        );        
      }
  }
  
  function test(){
    console.log("hello");
    console.log(this.props.visibility)
  
  }
  
  const mapStateToProps = (state) =&gt; {
    console.log(state);
    console.log(state.layout.sidebarVisibility);
    return {
      visibility: state.layout.sidebarVisibility,
    }
  };
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import { Provider } from 'react-redux';
  import Sidebar from './components/layout/Sidebar';
  import Header from './components/layout/Header';
  import store from './store';
  
  class App extends Component {
    render() {
      return (
        &lt;Provider store ={store}&gt;
          &lt;div className="App"&gt;
            &lt;Header /&gt;
            &lt;Sidebar/&gt;
          &lt;/div&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Store.js</p>
  
  <pre><code>import { createStore, applyMiddleware,compose} from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const initialState = {
  
  };
  
  const middleWare = [thunk];
  
  const store = createStore(rootReducer,initialState,compose(
      applyMiddleware(...middleWare),
      window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
      ));
  
  export default store;
  </code></pre>
  
  <p>RootReducer </p>
  
  <pre><code>import {combineReducers } from 'redux';
  import layoutReducer from './layoutReducer';
  
  export default combineReducers({
      layout : layoutReducer
  });
  
  </code></pre>
  
  <p>LayoutReduccer </p>
  
  <pre><code>import {TOGGLE_SIDEBAR_VIS} from '../actions/types';
  
  const initialState  = {
      sidebarVisibility : true
  }
  
  export default function(state = initialState,action){
      switch(action.type){
          case TOGGLE_SIDEBAR_VIS:
              return{ ...state,sidebarVisibility:action.payload};   
          default:
              return state;
      }
  }
  </code></pre>