javascript - Gatsby/Contentful Pass data from one component to another

Question

I'm playing around with Gatsby, Contentful and Google Maps. Here's the page that I'm working on:

import React, { useState } from 'react'
import Layout from '../components/Layout'
import { withGoogleMap, withScriptjs } from 'react-google-maps'
import Map from '../components/Map'
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';

const MapComponent = withScriptjs(withGoogleMap(Map));

export default function IndexPage() {

    const [modal, setmodal] = useState(false)

    return (
        <Layout>
            <div style={{ width: "100%", height: "100vh" }} >

                <MapComponent
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${"AIzaSyAGJcMjH34D2QWQpOKhOulJGfZ9kXVQuj8"}`}
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `100%` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    setmodal={setmodal}
                />
            </div>

            <Modal
                open={modal}
                onClose={() => setmodal(false)}
            >
                <h1>Contentful Content Here</h1>
            </Modal>

        </Layout>
    )
}

I extended the page and created a ./components/Map component to it. In the Map component I'm querying Contentful data.

Like this:

import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { useStaticQuery, graphql } from "gatsby"

const Map = (props) => {

    const data = useStaticQuery(graphql`
{
    allContentfulLocations {
      nodes {
        id
        name
        location {
          lat
          lon
        }
      }
    }
  }
`)
    const {
        allContentfulLocations: { nodes: locations },
    } = data

    const [infoWindow, setInfoWindow] = useState(null)

    return (
        <GoogleMap
            defaultZoom={12}
            defaultCenter={{
                lat: 14.05223,
                lng: 218.2437
            }}
        >

            {locations.map(({ location }) => {
                console.log(location);
                return (
                    <Marker
                        onMouseOver={() => {
                            setInfoWindow(true)
                        }}
                        onClick={() => {
                            props.setmodal(true)
                        }}
                        position={{
                            lat: location.lat,
                            lng: location.lon
                        }}
                    />
                )
            })}
        </GoogleMap>
    )
}

export default Map;

Now, I want to use the Contentful data inside the component on my page too. How can I access the Contentful data from the component and implement it on my page?

My Approach was to use useState with data,setData like this on my page:

import React, { useState } from 'react'
import Layout from '../components/Layout'
import { withGoogleMap, withScriptjs } from 'react-google-maps'
import Map from '../components/Map'
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';

const MapComponent = withScriptjs(withGoogleMap(Map));

export default function IndexPage() {

    const [modal, setmodal] = useState(false)
    const [data, setData] = (null)

    return (
        <Layout>
            <div style={{ width: "100%", height: "100vh" }} >

                <MapComponent
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${"AIzaSyAGJcMjH34D2QWQpOKhOulJGfZ9kXVQuj8"}`}
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `100%` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    setmodal={setmodal}
                    setData={setData}
                />
            </div>

            <Modal
                open={modal}
                onClose={() => setmodal(false)}
            >
                <h1>{data.locations.name}</h1>
            </Modal>

        </Layout>
    )
}

And in the Map component, inside the Marker component I've added a props.setData for the to access the data.

import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { useStaticQuery, graphql } from "gatsby"

const Map = (props) => {

    const data = useStaticQuery(graphql`
{
    allContentfulLocations {
      nodes {
        id
        name
        location {
          lat
          lon
        }
      }
    }
  }
`)
    const {
        allContentfulLocations: { nodes: locations },
    } = data

    const [infoWindow, setInfoWindow] = useState(null)

    return (
        <GoogleMap
            defaultZoom={12}
            defaultCenter={{
                lat: 14.05223,
                lng: 218.2437
            }}
        >

            {locations.map(({ location }) => {
                console.log(location);
                return (
                    <Marker
                        onMouseOver={() => {
                            setInfoWindow(true)
                        }}
                        onClick={() => {
                            props.setmodal(true)
                            props.setData(location)
                        }}
                        position={{
                            lat: location.lat,
                            lng: location.lon
                        }}
                    />
                )
            })}
        </GoogleMap>
    )
}

export default Map;

I'm stuck now. Getting an error saying that allContentfulLocations is undefined and I'm not receiving the data into my page. Can someone help me to get it right?

Answer 1

In your IndexPage, your state is held by data, not by setData. setData is just a setter function that sets the state within the provided data but your information is inside data, in addition, the setter doesn't accept any parameter by default so won't be able to use props.setData(location). Change it to:

import React, { useState } from 'react'
import Layout from '../components/Layout'
import { withGoogleMap, withScriptjs } from 'react-google-maps'
import Map from '../components/Map'
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';

const MapComponent = withScriptjs(withGoogleMap(Map));

export default function IndexPage() {

    const [modal, setmodal] = useState(false)
    const [data, setData] = useState(null)

    const setYourData= data => setData(data);

    return (
        <Layout>
            <div style={{ width: "100%", height: "100vh" }} >

                <MapComponent
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${"AIzaSyAGJcMjH34D2QWQpOKhOulJGfZ9kXVQuj8"}`}
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `100%` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    setmodal={setmodal}
                    setYourData={setYourData}
                    data={data}
                />
            </div>

            <Modal
                open={modal}
                onClose={() => setmodal(false)}
            >
                { data && <h1>{data.location.name}</h1>}
            </Modal>

        </Layout>
    )
}

Now, you are passing a function (setYourData) that is accepting a parameter (data) and sets the state accordingly, so your props.setData(location). Will become:

props.setYourData(location);

This value needs to be passed again downwards to your map component using data={data} (I would strongly suggest a new naming since it's a bit repetitive and may lead to some misunderstandings).

Note also the { data && <h1>{data.locations.name}</h1>} control. Initially, you've set to null the state, so your code can't reach data.locations.

Once the data is passed to the map component, you can play whatever you want with now new brand location, stored in data (props.data). Your map component should look like this:

import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { useStaticQuery, graphql } from "gatsby"

const Map = (props) => {
 console.log(props.data) // here you have your new data/location
    const data = useStaticQuery(graphql`
{
    allContentfulLocations {
      nodes {
        id
        name
        location {
          lat
          lon
        }
      }
    }
  }
`)
    const {
        allContentfulLocations: { nodes: locations },
    } = data

    const [infoWindow, setInfoWindow] = useState(null)

    return (
        <GoogleMap
            defaultZoom={12}
            defaultCenter={{
                lat: 14.05223,
                lng: 218.2437
            }}
        >

            {locations.map(({ location }) => {
                console.log(location);
                return (
                    <Marker
                        onMouseOver={() => {
                            setInfoWindow(true)
                        }}
                        onClick={() => {
                            props.setmodal(true)
                            props.setYourData(location)
                        }}
                        position={{
                            lat: location.lat,
                            lng: location.lon
                        }}
                    />
                )
            })}
        </GoogleMap>
    )
}

export default Map;