title: How would I pass data from one page to another in react?
body: <p>I am on the home page (<strong>App.js</strong>), it displays data, but then I click on one of the data links that redirects to a detailed page with the data <strong>(clientdetails.js)</strong>. On the clientdetails.js page I have a button that can edit the data, when i return to homepage (<strong>App.js</strong>), I want that data to be re-rendered. How would I do this in react? It currently displays the non-edited data. </p>
  
  <p><strong>App.js code</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>render(){
    const companyInfos = this.state.airlines &amp;&amp; this.state.airlines.map((airline, idx) =&gt;
    {
  
        if(airline.status == null)
        {
          airline.status = '';
        }
  
          return (
  
                &lt;div className="col-md-2" key={idx} style={{clear: (idx == 0 &amp;&amp; idx % 8 == 0) ? 'both' : 'none', 'width': 'auto'}}&gt; 
  
                  &lt;div className="imgBorder" &gt;
                  &lt;button type="button" className="close" onClick={() =&gt; this.handleClose(airline.airlineName, airline.airlineID)} &gt;
                    &lt;span &gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;p key={idx} className="text-center" style={{fontSize:14, color: 'black', backgroundColor: Base64.decode(airline.status)  }}&gt; {airline.airlineName + ' ' + airline.product }  &lt;/p&gt;
                  &lt;Link to={{
                      pathname: '/Airlines/airlineName?=' + airline.airlineName +'&amp;product?=' + airline.product + '&amp;monthyear?=' + this.state.Dashboard,
                      state: {
                        airlineID: airline.airlineID,
                        airlineName: airline.airlineName,
                        airlineProduct: airline.product,
                        dashboardMonthYear: this.state.Dashboard,
                        live: this.state.live,
                      }
                    }} &gt; 
                    &lt;img className="img-responsive" src={require(`./images/${airline.imageName}`)} /&gt; 
  
  
                  &lt;/Link&gt;
                  &lt;/div&gt;
  
                  &lt;br/&gt;
  
                &lt;/div&gt;         
  
          )
      });
  
    }
    {companyInfos}
  }
  </code></pre>
  
  <p><strong>Code in the clientdetails.js, save data and the home page function</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>DelayReturnToHomePage = (e) =&gt; {
  
    setTimeout(() =&gt; {
      this.props.history.push({
        pathname: '/'
      }) 
  
    }, 1700)
  }
  
  handleSaveData(){
  
    this.setState({
      saveDataClicked: 'yes'
    })
  
    if(this.state.live == 1)
    {
  
      fetch(`http://ca-fpscfb2:4000/SaveDataRedFlags?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;redFlags=${Base64.encode(this.state.redFlagContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;notes=${Base64.encode(this.state.notesContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;status=${Base64.encode(this.state.selectedOption.value)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;summary=${this.state.summaryLiveOn}`) &amp;&amp; 
      fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;statuscolor=${this.state.selectedOption.label}`)  
      .then( 
        this.setState({showSaveModal: true}),
        setTimeout(() =&gt; {
          this.handleSaveDataHide();
        }, 3000)
      )
    }
    else
    {
      fetch(`http://ca-fpscfb2:4000/SaveDataRedFlags?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;redFlags=${Base64.encode(this.state.redFlagContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;notes=${Base64.encode(this.state.notesContent)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;status=${Base64.encode(this.state.selectedOption.value)}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;summary=${this.state.summaryLiveOff}`) &amp;&amp;
      fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&amp;airlineID=${this.state.airlineID}&amp;statuscolor=${this.state.selectedOption.label}`) 
      .then( 
        this.setState({showSaveModal: true}),
        setTimeout(() =&gt; {
          this.handleSaveDataHide();
        }, 3000)
      )
    }
  }
  </code></pre>