title: How can I simply pass data from a component one page to a component on another page in React/Next.js?
body: <h3>Sumary</h3>
  <p>I have a simple next.js app with two pages, index.js and results.js. The index page has two Location AutoComplete fields which return the address and LatLng of a location after a user selects it from the dropdown of reccomended locations. Once returned, this data is stored in a variable called <code>markers</code> on the index page. When the user clicks the <em>Get Results</em> button on the index page, I'm attempting to pass the address and LatLng data to the results page, so that the selected locations can be shown as a markers on the map.</p>
  <h3>Problem</h3>
  <p>I've been attempting to do this on and off for about a week now and I can't figure out how to achieve what I want. I feel that there should be a super simple way to do this but I just can't figure it out. I've tried things like:</p>
  <ul>
  <li>Passing the data thorough request parameters on a button click, but the link is generated based on the variables value when the page renders rather than being updated when the variable is updated</li>
  <li>Having the map on the same page as the location autocomplete and attempting to use state to automatically reload the map, which didn't seem to work at all for me</li>
  <li>I've also looked into Redux but this seems to be way too complicated to simply pass an object/it's data from one page to another</li>
  </ul>
  <p>My ideal solution is a simple way to pass the data from indext to results. It's probably also worth pointing out that I'm new to React/Next.js so I might be going about all of this the wrong way, and once this is working I'll also be adding in an API call to get directions between the two LatLng points which will also be displayed on the map on the results page.</p>
  <h3>Code</h3>
  <p>index.js (simplified)</p>
  <pre><code>{/* Import used next and style objects */ }
  import Head from 'next/head'
  import styles from '../styles/Home.module.css'
  
  {/* Import react-bootstrap */ }
  import { Container, Row, Col } from 'react-bootstrap'
  
  {/* Import geosuggest */ }
  import Geosuggest from 'react-geosuggest'
  
  {/* Import used components */ }
  import NavigationBar from '../components/NavigationBar'
  import Footer from '../components/Footer'
  
  {/* Import and use runtime vars for Google API */ }
  import getConfig from &quot;next/config&quot;
  const { publicRuntimeConfig } = getConfig()
  const GoogleApiUrl = `https://maps.googleapis.com/maps/api/js?key=${publicRuntimeConfig.MAPS_JAVASCRIPT_API_KEY}&amp;libraries=places`
  
  export default function Home() {
  
    const markers = {
      from: {description: &quot;&quot;, lat: 0, lng: 0},
      to: {description: &quot;&quot;, lat: 0, lng: 0}
    }
  
    const onFromSuggestSelect = (suggest) =&gt; {
      console.log(&quot;New FROM location selected: \&quot;&quot; + suggest.description + &quot;\&quot;&quot;);
      markers.from.description = suggest.description
      markers.from.lat = suggest.location.lat
      markers.from.lng = suggest.location.lng
    }
  
    const onToSuggestSelect = (suggest) =&gt; {
      console.log(&quot;New TO location selected: \&quot;&quot; + suggest.description + &quot;\&quot;&quot;);
      markers.to.description = suggest.description
      markers.to.lat = suggest.location.lat
      markers.to.lng = suggest.location.lng
    }
  
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;MyApp&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;MyApp&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
          &lt;script src={GoogleApiUrl}&gt;&lt;/script&gt;
        &lt;/Head&gt;
  
        &lt;NavigationBar/&gt;
  
        &lt;div className={styles.container}&gt;
          &lt;main&gt;
            &lt;Container&gt;
              &lt;Row className=&quot;text-center&quot;&gt;
                &lt;Col md={1}&gt;&lt;/Col&gt;
                &lt;Col md={5}&gt;&lt;Geosuggest data-test-id=&quot;autocomplete-start-test&quot; placeholder=&quot;From...&quot; onSuggestSelect={onFromSuggestSelect} country=&quot;gb&quot;  minLength=&quot;3&quot; /&gt;&lt;/Col&gt;
                &lt;Col md={5}&gt;&lt;Geosuggest data-test-id=&quot;autocomplete-end-test&quot; placeholder=&quot;To...&quot; onSuggestSelect={onToSuggestSelect} country=&quot;gb&quot;  minLength=&quot;3&quot; /&gt;&lt;/Col&gt;
                &lt;Col md={1}&gt;&lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/Container&gt;
          &lt;/main&gt;
  
          &lt;Footer/&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>results.js (simplified)</p>
  <pre><code>{/* Import used next and style objects */ }
  import Head from 'next/head'
  import styles from '../styles/Home.module.css'
  
  {/* Import used react-bootstrap objects */ }
  import { Container } from 'react-bootstrap'
  
  {/* Import used components */ }
  import NavigationBar from '../components/NavigationBar'
  import Footer from '../components/Footer'
  import Map from '../components/Map'
  
  {/* Import and use runtime vars for Google API */ }
  import getConfig from &quot;next/config&quot;
  const { publicRuntimeConfig } = getConfig()
  const GoogleApiUrl = `https://maps.googleapis.com/maps/api/js?key=${publicRuntimeConfig.MAPS_JAVASCRIPT_API_KEY}&amp;libraries=places`
  
  export default function Home() {
  
      const markers = {
          from: {description: &quot;&quot;, lat: 0, lng: 0},
          to: {description: &quot;&quot;, lat: 0, lng: 0}
        }
  
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;MyApp&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;MyApp&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
          &lt;script src={GoogleApiUrl}&gt;&lt;/script&gt;
        &lt;/Head&gt;
  
        &lt;NavigationBar/&gt;
  
        &lt;div className={styles.container}&gt;
          &lt;main&gt;
              &lt;Container&gt;
                  {/* MARKERS NEEDS TO BE PASSED IN ON THE LINE BELOW */}
                  &lt;Map markers={markers}/&gt; 
              &lt;/Container&gt;
          &lt;/main&gt;
        &lt;/div&gt;
        
        &lt;Footer/&gt;
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Map.js (component)</p>
  <pre><code>import React from &quot;react&quot;
  import { GoogleMap, Marker } from &quot;@react-google-maps/api&quot;
  
  export default class Map extends React.Component {
      render() {
          // Set the map to fill its container
          const containerStyle = { width: '500px', height: '500px' }
            
          // Set the map to show the entire UK on initial load
          const center = { lat: 54.476422, lng: -3.397340 }
          const zoom = 6
  
          // Return the map with the above defaults
          return(
              &lt;GoogleMap mapContainerStyle={containerStyle} center={center} zoom={zoom}&gt;
                  &lt;Marker position={{ lat: this.props.markers.from.lat, lng: this.props.markers.from.lng }} /&gt;
                  &lt;Marker position={{ lat: this.props.markers.to.lat, lng: this.props.markers.to.lng }} /&gt;
              &lt;/GoogleMap&gt;
          )
      }
  }
  </code></pre>