title: React-Redux: this.props.data.map is not a function error
body: <p>In my react app I am using API calls which should be authenticated by a token. so the first call is for getToken and then storing token in the session, but whenever I start my project it always throws an error on first run it(the error on the title)but if I refresh it, everything works.
  Can somebody explain to me what I am missing is this a problem of Async Calls?</p>
  
  <p><strong>Below are some part of my code</strong></p>
  
  <p><strong>1).</strong> This is where I call token and other required API for my page during load:</p>
  
  <pre><code>componentDidMount() {
   this.props.getToken('react@e-yantra.org','react007zxt');
    //sessionStorage.setItem('jwtToken', this.props.token);
     this.props.fetchStates();
     this.props.fetchVenues();
  }
  </code></pre>
  
  <p><strong>2).</strong> This is the action where I call fetch API:</p>
  
  <pre><code>import {
      FETCH_STATES,
      FETCH_VENUES
  } from '../actions/types';
  
  const token = sessionStorage.getItem('jwtToken');
  const postheaders={
   'Content-Type': 'application/x-www-form-urlencoded'
  };
  
  export const getToken = (username,password) =&gt; dispatch=&gt;{
          fetch('http://localhost:8001/api/getToken',{
            method: 'POST',
            headers: postheaders,
            body:JSON.stringify({username,password})
          })
              .then(res =&gt; res.json())
              .then(token =&gt;{
                let str=JSON.stringify(token.token).replace(/"/g,"");
                sessionStorage.setItem('jwtToken',str);
              });
      };
  
  
  export const fetchStates = () =&gt; dispatch =&gt; {
      fetch(`http://localhost:8001/api/states?token=${token}`)
          .then(res =&gt; res.json())
          .then(states =&gt; dispatch({
              type: FETCH_STATES,
              payload: states
          }));
  };
  
  
  export const fetchVenues=()=&gt;dispatch=&gt;{
         fetch('http://localhost:8001/api/venues')
             .then(res =&gt; res.json())
             .then(venues =&gt; dispatch({
                 type: FETCH_VENUES,
                 payload: venues
             })
             );
  };
  </code></pre>
  
  <p><strong>3).</strong> Below is the part of render where I am using it and getting an error on the first run :</p>
  
  <pre><code>const stateItems = this.props.states.map(data =&gt; (
             &lt;option key={data.id} value = {data.state} &gt; {data.state} &lt;/option&gt;
         ));
  
               ));
    const venueItems = this.props.venues.map(venue =&gt; (
                             &lt;option key={venue.id} value = {venue.id} &gt; {venue.college_name} &lt;/option&gt;
                         ));
  </code></pre>
  
  <p><strong>Edit 1:</strong> Problem is with token getting set in session store which is not available for the first API calls of states and venues.</p>
  
  <pre><code>http://localhost:8001/api/states?token=null 400 (Bad Request)
  </code></pre>