title: React print this.props only when value is not null
body: <p>So I have two simple React classes</p>
  
  <p><em>Dashboard (parent)</em></p>
  
  <pre><code>class UserDashboardPage extends Component {
    render() {
      console.log("UserDashboardPage")
      console.log(this.props.users)
      return (
        &lt;div&gt;
          &lt;UserInfoComponent user={this.props.users} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  // map Users from store to Props
  function mapStateToProps({ users }) {
    return { users };
  }
  </code></pre>
  
  <p><em>UserInfoComponent (child)</em></p>
  
  <pre><code>export class UserInfoComponent extends Component {
    render() {
      console.log("UserInfoComponent")
      console.log(this.props.user)
      return (
        &lt;h2&gt;{this.props.user.firstName}&lt;/h2&gt;
      );
    }
  }
  </code></pre>
  
  <p>and the problem I am having is that I want to print the <code>this.props.user.firstName</code> in the UserInfoComponent but the value is initially null and then the component does not re-render when the value gets the data.</p>
  
  <p><em>userReducers</em></p>
  
  <pre><code>const initialState = { data: [], user: null };
  
  const UserReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case ADD_USER :
        return {
          data: [action.user, ...state.data],
        };
      case UPDATE_USER :
        return {
          user: action.user,
        };
      case LOGIN_USER: {
        const user = (action.response.statusCode === 200) ? action.response.user : null;
  
        console.log(user);
  
        return {
          user,
        };
      }
      default:
        return state;
    }
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/99wZw.png" rel="nofollow noreferrer">Example of how the data changes</a></p>