title: React Child component don't update when parent component's state update
body: <p>I'm working with Google place search API. When I fetch some Data from Google Place search API it only returns 20 records and gives a next page token for more results then I grab the <code>Place_id</code> for each place and then again I fetch all details of that place so I'm fetching data twice what I did is created two components, one is responsible for fetching places and it's my parent component and the other is responsible for fetching the place details using <code>place_id</code> and it's my child component. Here is my code below</p>
  
  <p><strong>1. Extractor.js (<em>parent component</em>)</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Search from './Components/Search';
  import Display from './Components/Display';
  import Header from './Components/Header';
  import Instructions from './Components/Instructions';
  
  const URI = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=';
  const placeURI = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=';
  const API = '&amp;key=xxxxxxxxxxxxxxxxxxxxxxxxx';
  class Extractor extends Component {
  
      getData = (keyword, location, country) =&gt; {
          let dataURI = `${URI}${keyword}+${location}+${country}${API}`;
          let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
          targetUrl = dataURI
          fetch(proxyUrl + targetUrl)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
  
              let jsonData = JSON.parse(JSON.stringify(data));
              let nextPageToken = jsonData.next_page_token;
              this.setState({nextPage: nextPageToken, googleData: jsonData, dataURI });
  
              //console.log(dataURI");
          })
          .catch((e)=&gt; console.log(`Error! ${e.message}`));
      }
  
      isEmpty = (obj) =&gt; {
          for(var key in obj) {
              if(obj.hasOwnProperty(key))
                  return false;
          }
          return true;
      }
  
    viewMore = () =&gt; {
      let dataURI = `${this.state.dataURI}&amp;pagetoken=${this.state.nextPage}`;
          let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
          targetUrl = dataURI
          fetch(proxyUrl + targetUrl)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
  
              let jsonData = JSON.parse(JSON.stringify(data));
              let nextPageToken = jsonData.next_page_token;
              this.setState({nextPage: nextPageToken, googleData: jsonData, dataURI });
              //console.log(dataURI");
          })
          .catch((e)=&gt; console.log(`Error! ${e.message}`));
    }
  
      constructor(props){
          super(props);
          this.state = {
              googleData: [],
              nextPage: '',
        dataURI: ''
          }
      }
  
   render() {
       let displayData;
       if(this.state.googleData.status === 'OK'){
           displayData = &lt;Display googleData={this.state.googleData} nextPageToken = {this.state.nextPage} api={API} placeURI = {placeURI} viewMore = {this.viewMore} /&gt;
       }
       else{
           displayData = &lt;Instructions /&gt;
       }
     //console.log(this.state.dataURI);
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;section&gt;
            &lt;Search getData={this.getData} /&gt;
                  {displayData}
          &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Extractor;
  </code></pre>
  
  <p><strong>2. Display.js (<em>Child component</em>)</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      Table,
      ProgressBar,
      Button
  }
  from 'react-bootstrap';
  
  class Display extends Component {
      constructor(props) {
        super(props);
        this.state={
            rows: []
        }
      }
  
      componentDidMount(){
          var records = this.props.googleData;
          const API = this.props.api;
          const placeURI = this.props.placeURI;
          for (let p_id of records.results) {
              let dataURI = `${placeURI}${p_id.place_id}${API}`;
              let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
                  targetUrl = dataURI
              fetch(proxyUrl + targetUrl)
              .then((res) =&gt; res.json())
              .then((data) =&gt; {
                  let jsonData = JSON.parse(JSON.stringify(data));
                  //console.log(dataURI);
                  this.setState(prevState =&gt; ({rows: [...prevState.rows, jsonData.result]}));
              })
              .catch((e) =&gt; console.log(`Error! ${e.message}`));
          }
      }
  
      viewMoreCall = () =&gt; {
        this.props.viewMore();
      }
  
      render() {
          //console.log(this.state.rows);
          return (
              &lt;div&gt;
                  &lt;ProgressBar now={45} /&gt;
                  &lt;Table striped bordered condensed hover responsive&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;#&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Full Address&lt;/th&gt;
                        &lt;th className="pno"&gt;Phone&lt;/th&gt;
                        &lt;th className="pno"&gt;International P.no&lt;/th&gt;
                        &lt;th&gt;Website&lt;/th&gt;
                        &lt;th&gt;Rating&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      {this.state.rows.map(( listValue, index ) =&gt; {
                        return (
                          &lt;tr key={index}&gt;
                            &lt;td&gt;{listValue.index}&lt;/td&gt;
                            &lt;td&gt;{listValue.name}&lt;/td&gt;
                            &lt;td&gt;{listValue.formatted_address}&lt;/td&gt;
                            &lt;td&gt;{listValue.formatted_phone_number}&lt;/td&gt;
                            &lt;td&gt;{listValue.international_phone_number}&lt;/td&gt;
                            &lt;td&gt;&lt;a href={listValue.website}&gt;{listValue.website}&lt;/a&gt;&lt;/td&gt;
                            &lt;td&gt;{listValue.rating}&lt;/td&gt;
                          &lt;/tr&gt;
                        );
                      })}
                    &lt;/tbody&gt;
                  &lt;/Table&gt;
          &lt;Button onClick={this.viewMoreCall} type="button"&gt;View More...&lt;/Button&gt;
              &lt;/div&gt;
          );
      }
  
  }
  export default Display;
  </code></pre>
  
  <p>when I click view more button created in the child component I change the state of parent component, But doing this is not returning more records.</p>
  
  <p>What I want to achieve is to append more data to my existing Table when user click view more button.</p>