title: ReactJS: Passing a user object as a props to a component results in its value being undefined
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>requests.data.js:</p>
  
  <pre><code>export default {
      requests: [
          {
              "id": 9,
              "timestamp": Date.now(),
              "description": "Need help with ordering",
              "status": "Completed"
          },
          {
              "id": 2,
              "timestamp": Date.now(),
              "description": "Need help with ordering",
              "status": "Assistance Requested"
          },
          {
              "id": 4,
              "timestamp": Date.now(),
              "description": "Need help with ordering",
              "status": "Assistance Requested"
          },
          {
              "id": 7,
              "timestamp": Date.now(),
              "description": "Need help with ordering",
              "status": "Assistance Requested"
          }   
      ]
  }
  </code></pre>
  
  <p>requests.actions.js:</p>
  
  <pre><code>import { CHANGE_REQUEST_STATUS } from './requests.types';
  
  export const changeRequest = (id, user, status) =&gt; {
      return {
          type: CHANGE_REQUEST_STATUS,
          id,
          user,
          status
      }
  }
  </code></pre>
  
  <p>user.reducer.js:</p>
  
  <pre><code>import { SET_CURRENT_USER } from './user.types';
  
  const INITIAL_STATE = {
      currentUser: null
  }
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
          case SET_CURRENT_USER:
              return { ...state, currentUser: action.payload }
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>user.actions.js:</p>
  
  <pre><code>import { SET_CURRENT_USER } from './user.types';
  
  export const setCurrentUser = currentUser =&gt; dispatch =&gt; {
      dispatch({
          type: SET_CURRENT_USER,
          payload: currentUser
      });
  }
  </code></pre>
  
  <p>root.reducer.js:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  
  import userReducer from './user/user.reducer';
  import requestsReducer from './requests/requests.reducer'
  
  export default combineReducers({
      user: userReducer,
      requests: requestsReducer
  })
  </code></pre>
  
  <p>I have the following RequestListPage component.</p>
  
  <p>requests.component.jsx:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import Request from '../../components/request/request.component';
  import './requests.styles.scss';
  
  class RequestListPage extends Component {
  
      render() {
          const { requests } = this.props;
          const { user } = this.props;
  
          console.log("Printing user");
          console.log(user);
  
          const requestList = requests.length ? (
              requests.map(request =&gt; {
                  return(
                      &lt;Request request={request} user={user} key={request.id}/&gt;
                  )
              })
          ) : (
              &lt;div&gt;No requests yet.&lt;/div&gt;
          )
  
          return (
              &lt;div className="requests-page"&gt;
                  &lt;h1&gt;Requests&lt;/h1&gt;
                  &lt;div className="requests-container"&gt;
                      &lt;div className="request-list"&gt;
                          {requestList}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          requests: state.requests.requests,
          user: state.user.currentUser
      }
  }
  
  export default connect(mapStateToProps)(RequestListPage);
  </code></pre>
  
  <p>Printing the user object in the above code gives the following:</p>
  
  <p><a href="https://i.stack.imgur.com/jAAM1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jAAM1.png" alt="enter image description here"></a></p>
  
  <p>I have the following Request component.</p>
  
  <p>request.component.jsx:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { changeRequest } from '../../redux/requests/requests.actions';
  import './request.styles.scss';
  
  class Request extends Component {
  
      handleClick = (id, user, status) =&gt; {
          this.props.changeRequest(id, user, status);
      }
  
      render() {
          const { id, timestamp, description, status } = this.props.request;
          const { user } = this.props.user;
          console.log("PRINTING USER");
          console.log(user);
          return (
              &lt;div className="request-box"&gt;
                  &lt;div className="request-details"&gt;
                      &lt;div&gt;
                          &lt;h1&gt;Table {id}, {timestamp}&lt;/h1&gt;
                          &lt;h2&gt;{description}&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;div className="status-button"&gt;
                          &lt;button type="button" className="request-button" onClick={() =&gt; this.handleClick(id, user, status)}&gt;{status}&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          requests: state.requests.requests,
          user: state.user.currentUser
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          changeRequest: (id, user, status) =&gt; { dispatch(changeRequest(id, user, status)) }
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Request);
  </code></pre>
  
  <p>In <code>requests.component.jsx</code>, I have passed the user object to the Request component as a props. However, in <code>request.component.jsx</code>, when I <code>console.log()</code> the value of user object, I get the following:</p>
  
  <p><a href="https://i.stack.imgur.com/dY7zS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dY7zS.png" alt="enter image description here"></a></p>
  
  <p>I am not sure why when I pass the user as a props to the Request component, the value of the user object is undefined. Any insights are appreciated. </p>