title: React-Redux: Page becomes blank white screen after clicking a button and components do not appear
body: <p>I am working on a React application and I am using Redux to store the state. I have the following code:</p>
  
  <p>category-arrows.component.jsx:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
  import './category-arrows.styles.scss';
  
  class CategoryArrows extends Component {
  
  
      handleClick = (id) =&gt; {
          this.props.increaseCategoryRank(id);
      }
  
      render() {
  
          const { categoryRank, categoryId, increaseCategoryRank, decreaseCategoryRank } = this.props;
  
          return (
              &lt;div class="arrows-container"&gt;
                  &lt;div class="up-arrow" onClick={this.handleClick(categoryId)}&gt;&lt;/div&gt;
                  &lt;div class="category-rank"&gt;
                      &lt;p&gt;{categoryRank}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="down-arrow"&gt;&lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default connect( { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);
  </code></pre>
  
  <p>menu-category.component.jsx:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  import MenuItem from '../../components/menu-item/menu-item.component';
  import MenuCarousel from '../../components/menu-carousel/menu-carousel.component';
  import NewItemCard from '../../components/new-item-card/new-item-card.component';
  import DeleteCategory from '../../components/delete-category/delete-category.component';
  import CategoryArrows from
  '../../components/category-arrows/category-arrows.component';
  import { editCategory } from '../../redux/menu/menu.actions';
  import { MANAGER } from '../../redux/user/user.staff-types';
  
  import './menu-category.styles.scss';
  
  const MenuCategory = ({ currentUser, editCategory, isEditing, ...category  }) =&gt; {
  
      const isManager = currentUser &amp;&amp; currentUser.type === MANAGER;
  
      const editableProps = {
          className: isManager ? 'category-editable' : null,
          contentEditable: !!isManager,
          suppressContentEditableWarning: true
      };
  
      return (
          &lt;div key={category._id} className='menu-category'&gt;
              &lt;h2 {...editableProps} onBlur={event =&gt; editCategory({ ...category, name: event.target.innerText })}&gt;
                  {category.name}
              &lt;/h2&gt;
              &lt;p {...editableProps} onBlur={event =&gt; editCategory({ ...category, description: event.target.innerText })} &gt;
                  {category.description}
              &lt;/p&gt;
              &lt;MenuCarousel&gt;
                  {isManager &amp;&amp; isEditing ? &lt;CategoryArrows className='category-rank-arrows' categoryRank={category.rank} categoryId={category._id} /&gt; : null}
                  {isManager ? &lt;NewItemCard categoryId={category._id} /&gt; : null}
                  {category.items.map(menuItem =&gt; &lt;MenuItem key={menuItem._id} categoryId={category._id} {...menuItem} /&gt;)}
                  {isManager ? &lt;DeleteCategory name={category.name} categoryId={category._id} className='delete-bin' /&gt; : null}
              &lt;/MenuCarousel&gt;
          &lt;/div&gt;
      )
  }
  
  const mapStateToProps = state =&gt; ({
      currentUser: state.user.currentUser
  })
  
  export default connect(mapStateToProps, { editCategory })(MenuCategory);
  </code></pre>
  
  <p>menu.component.jsx:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  import MenuCategory from '../../components/menu-category/menu-category.component'
  import NewCategoryButton from '../../components/new-category-button/new-category-button.component';
  import EditMenuButton from '../../components/edit-menu-button/edit-menu-button.component';
  
  import './menu.styles.scss';
  
  class MenuPage extends Component {
  
      state = {
          menuEditable: false
      }
  
      toggleMenuEditable = () =&gt; this.setState({ menuEditable: !this.state.menuEditable })
  
      render() {
                    return (
              &lt;div className='menu-page'&gt;
                  {this.props.menu ? this.props.menu.map(category =&gt; &lt;MenuCategory key={category._id} {...category} isEditing={this.state.menuEditable} /&gt;) : null}
                  &lt;div className='edit-menu-buttons'&gt;
                      &lt;div className='menu-button'&gt;
                          {this.props.currentUser ? &lt;NewCategoryButton /&gt; : null}
                      &lt;/div&gt;
                      &lt;div className='menu-button'&gt;
                          {this.props.currentUser ? &lt;EditMenuButton onClick={this.toggleMenuEditable} isEditing={this.state.menuEditable} /&gt; : null}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = state =&gt; ({
      currentUser: state.user.currentUser,
      menu: state.menu
  })
  
  export default connect(mapStateToProps)(MenuPage);
  </code></pre>
  
  <p>menu.actions.js:</p>
  
  <pre><code>import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';
  
  export const increaseCategoryRank = categoryId =&gt; dispatch =&gt; {
      dispatch({ type: INCREASE_CATEGORY_RANK, payload: categoryId })
  }
  
  export const decreaseCategoryRank = categoryId =&gt; dispatch =&gt; {
      dispatch({ type: DECREASE_CATEGORY_RANK, payload: categoryId })
  }
  </code></pre>
  
  <p>menu.types.js:</p>
  
  <pre><code>export const INCREASE_CATEGORY_RANK = "INCREASE_CATEGORY_RANK";
  export const DECREASE_CATEGORY_RANK = "DECREASE_CATEGORY_RANK";
  </code></pre>
  
  <p>menu.reducer.js:</p>
  
  <pre><code>import INITIAL_STATE from './menu.data';
  import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
          case INCREASE_CATEGORY_RANK:
              console.log(action.payload._id);
              return;
          case DECREASE_CATEGORY_RANK:
              console.log(action.payload._id);
              return;
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>menu.data.js:</p>
  
  <pre><code>export default [
      {
          "_id": "c0daac6ab8954a40606dd8b81d24a0ef",
          "name": "Entree",
          "rank": "0",
          "items": [
              {
                  "title": "Curry Puffs",
                  "price": 14,
                  "_id": "615caa7dd573bcf84781c9e4382b520d"
              },
              {
                  "title": "Spring Rolls",
                  "price": 12,
                  "_id": "542f711856b7854b71d9862797620e23"
              },
              {
                  "title": "Tandoori Cauliflower",
                  "price": 20,
                  "_id": "f0c0f2fa02e392ad4e74dfaaf6068fb1"
              }
          ]
      },
      {
          "_id": "934aeba1e96e6d6a4207cd5ba207b52a",
          "name": "Lunch",
          "rank": "1",
          "items": [
              {
                  "title": "Spaghetti",
                  "price": 20,
                  "_id": "db414e2b9951ed621fbf6fb40df36ee3"
              },
              {
                  "title": "Spaghetti",
                  "price": 20,
                  "_id": "253592733a8f7835f390d3d9ed8bda95"
              },
              {
                  "title": "Spaghetti",
                  "price": 20,
                  "_id": "a22741f27a346cda93d3cf752e371779"
              }
          ]
      }
  ]
  </code></pre>
  
  <p>In the above code, I have a <code>CategoryArrows</code> component that is rendered in the <code>MenuCategory</code> component only if the <code>isEditing</code> value which is passed from the <code>MenuPage</code> component to the <code>MenuCategory</code> component as a props is true. When the <code>EditMenuButton</code> component is clicked, <code>isEditing</code> is set to true, and the <code>CategoryArrows</code> components appear on the menu page.</p>
  
  <p>When the <code>up-arrow</code> div is clicked I want to dispatch the action <code>increaseCategoryRank</code>, which takes the category id as a parameter. I have added code for this action.</p>
  
  <p>However, when I click the <code>EditMenuButton</code> component, the <code>CategoryArrows</code> do not appear and the screen turns blank white. I get the following error when I inspect the page:</p>
  
  <blockquote>
  <pre><code>Uncaught Error: Invalid value of type object for mapStateToProps argument when connecting component CategoryArrows.
  </code></pre>
  </blockquote>
  
  <p>I am not sure what this error means and how to resolve it. Any insights are appreciated.</p>