title: Not able to use props to query API in react js
body: <p>I have <code>Restaurants</code> component which is responsible for listing restaurants from Zomato Dev APIs. I have passed <code>Category</code> and <code>City</code> from other components to <code>Restaurants</code> component. </p>
  
  <p>I am opening <code>Restaurants</code> component with below code : </p>
  
  <pre><code>this.props.history.push(
          {
              pathname : '/restaurants', 
              valueCategory : this.props.location.valueA,  // CATEGORY
              valueCity : this.state.cities[index] // CITY
          });
  </code></pre>
  
  <p>I want to use these <code>valueCategory</code> and <code>valueCity</code> in calling <code>/search</code> api. </p>
  
  <p>Code : </p>
  
  <pre><code>class Restaurants extends React.Component {
  
  constructor(props) {
      super(props);
      this.componentDidMount = this.componentDidMount.bind(this);
      this.getRestaurants = this.getRestaurants.bind(this);
  }
  
  componentDidMount() {
      // I AM GETTING ERROR 'TypeError: Cannot read property 'name' of undefined' ON THIS LINE
      console.log("Component Did Mount Restaurant : " + this.props.location.valueCity.name);
  }
  
   componentDidUpdate(prevProps, prevState, snapshot){
      console.log("Component Did Update :", prevProps); 
      //THIS PRINTS prevProps, WHICH CONTAINS valueCity and valueCategory but I am unable to access them
      return false;
  }
  
  render() {
      let category, city;
      category = '';
      city = '';
  
      if(!isUndefined(this.props.location.valueCategory)) {
          category = &lt;p&gt;You selected Category as : {this.props.location.valueCategory.categories.name}&lt;/p&gt;;
      }
  
      if(!isUndefined(this.props.location.valueCity)) {
      // STRANGLY, THIS LINE WORKS FINE! WHEN I AM ACCESSING valueCity.name
          city = &lt;p&gt;You selected City as : {this.props.location.valueCity.name}&lt;/p&gt;;
      }
  
      console.log(this.props.location);
      return (
          &lt;div&gt; 
              {category}
              {city}
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/aeeCH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aeeCH.png" alt="enter image description here"></a></p>
  
  <p>My question is :</p>
  
  <ul>
  <li>I am able to access <code>{this.props.location.valueCity.name}</code> in <code>render()</code> method</li>
  <li>But I am not able to access the same in <code>componentDidMount()</code> or any other method? I am getting crash </li>
  </ul>
  
  <blockquote>
    <p>TypeError: Cannot read property 'name' of undefined</p>
  </blockquote>