How would I pass data from one page to another in react?

Question

I am on the home page (App.js), it displays data, but then I click on one of the data links that redirects to a detailed page with the data (clientdetails.js). On the clientdetails.js page I have a button that can edit the data, when i return to homepage (App.js), I want that data to be re-rendered. How would I do this in react? It currently displays the non-edited data.

App.js code

render(){
  const companyInfos = this.state.airlines && this.state.airlines.map((airline, idx) =>
  {

      if(airline.status == null)
      {
        airline.status = '';
      }

        return (

              <div className="col-md-2" key={idx} style={{clear: (idx == 0 && idx % 8 == 0) ? 'both' : 'none', 'width': 'auto'}}> 

                <div className="imgBorder" >
                <button type="button" className="close" onClick={() => this.handleClose(airline.airlineName, airline.airlineID)} >
                  <span >&times;</span>
                </button>
                <p key={idx} className="text-center" style={{fontSize:14, color: 'black', backgroundColor: Base64.decode(airline.status)  }}> {airline.airlineName + ' ' + airline.product }  </p>
                <Link to={{
                    pathname: '/Airlines/airlineName?=' + airline.airlineName +'&product?=' + airline.product + '&monthyear?=' + this.state.Dashboard,
                    state: {
                      airlineID: airline.airlineID,
                      airlineName: airline.airlineName,
                      airlineProduct: airline.product,
                      dashboardMonthYear: this.state.Dashboard,
                      live: this.state.live,
                    }
                  }} > 
                  <img className="img-responsive" src={require(`./images/${airline.imageName}`)} /> 


                </Link>
                </div>

                <br/>

              </div>         

        )
    });

  }
  {companyInfos}
}

Code in the clientdetails.js, save data and the home page function

DelayReturnToHomePage = (e) => {

  setTimeout(() => {
    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}&airlineID=${this.state.airlineID}&redFlags=${Base64.encode(this.state.redFlagContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&notes=${Base64.encode(this.state.notesContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&status=${Base64.encode(this.state.selectedOption.value)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&summary=${this.state.summaryLiveOn}`) && 
    fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&statuscolor=${this.state.selectedOption.label}`)  
    .then( 
      this.setState({showSaveModal: true}),
      setTimeout(() => {
        this.handleSaveDataHide();
      }, 3000)
    )
  }
  else
  {
    fetch(`http://ca-fpscfb2:4000/SaveDataRedFlags?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&redFlags=${Base64.encode(this.state.redFlagContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&notes=${Base64.encode(this.state.notesContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&status=${Base64.encode(this.state.selectedOption.value)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&summary=${this.state.summaryLiveOff}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&statuscolor=${this.state.selectedOption.label}`) 
    .then( 
      this.setState({showSaveModal: true}),
      setTimeout(() => {
        this.handleSaveDataHide();
      }, 3000)
    )
  }
}

Shubham · Accepted Answer · 2018-12-10T19:06:49.627

1

you can pass the data through history routing,

Ex as per your code:-

DelayReturnToHomePage = (e) => {

  setTimeout(() => {
     var pageType = {
         pathname: '/',
         state: {
           data:{
             'pass':'your',
             'values':'here'
           }
         }
       }
    this.props.history.push(pageType); 


  }, 1700)
}

you will receive the data in props.location.state.data in your home view

edited Dec 10 '18 at 19:06

answered Dec 10 '18 at 18:21

Shubham

1,740
1
15
17

When i do this I get an error in homepage, it says **TypeError: Cannot read property 'state' of undefined** – bobb1213131 Dec 10 '18 at 18:41
I tried doing this, in the **componentWillMount() { if(this.props.location.state != undefined) { const {airlines} = this.props.location.state; this.setState({ airlines: airlines }) }}** to check if the state is null but i still get the error – bobb1213131 Dec 10 '18 at 18:43
Now i get **TypeError: Cannot read property 'location' of undefined** hmm – bobb1213131 Dec 10 '18 at 18:53
does props contain history? can you post the full object in props and history, or check window.location.state – Shubham Dec 10 '18 at 18:56
when i console.log(this.props) it gives me an object, when i console.log(this.props.history) its undefined – bobb1213131 Dec 10 '18 at 18:59
can you please check whether props.location has any key named state, in componentDIdMount or componentWillReceiveProps also you can check – Shubham Dec 10 '18 at 19:06
When i launch the home page first time, its undefined, when i go to my detailed page then return to home page nothing prints from the console log in the componentDidMount – bobb1213131 Dec 10 '18 at 19:09
this may help you [react-router-pass-data-when-navigating-programatically](https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programatically). sorry i could not help much – Shubham Dec 10 '18 at 19:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185018/discussion-between-bobb1213131-and-shubham). – bobb1213131 Dec 10 '18 at 19:15

How would I pass data from one page to another in react?

1 Answers1