Nextjs Fetch Data props to components

Question

I am currently trying to add a leaflet map to nextjs. With predefined latitude and longitude in the component the display already works.

Now I want to display retrieved data from my api in the component as longitude and latitude.

This does not work because data.latitude is not set until my index page.

Do any of you have an idea how to get data.latitude and data.longitude from my index page into the component?

This is the code of Map component:

import React from "react";
import { TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import StyledMapContainer from "./styled.js";
import { Marker, Popup } from "react-leaflet";
import MarkerIcon from "../mapmarker/index.jsx";
import { data } from "../../pages/index";

console.log(data);

const Map = () => {
    return (
        <StyledMapContainer
            watch
            enableHighAccuracy
            zoomControl
            center={{ lat: data?.longitude, lng: data?.latitude }}
            zoom={[13]}
            scrollWheelZoom={false}
        >
            <TileLayer
                url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
                zoomControl={true}
            />
            <Marker position={{ lat: data?.longitude, lng: data?.latitude }} icon={MarkerIcon}>
                <Popup>The Ship is here!</Popup>
            </Marker>
        </StyledMapContainer>
    );
};

export default Map;

The code from the index is:

const Description = () => {
    const { reload, query } = useRouter();
    const { nr } = query;
    const { name } = query;
    const [data, setData] = useState();
    const [unixTime, setunixTime] = useState();

    const NoSsrMap = dynamic(() => import("../../atoms/map/index"), { ssr: false });

    useEffect(async () => {
        const { data } = await axios.get(`http://localhost:5000/${nr}`);
        const extractedData = data.data;
        setData(extractedData);

        if (extractedData) {
            const unixTimestamp = data.data.unixtime;
            const millisecons = unixTimestamp * 1000;
            const dateObj = new Date(millisecons);
            const humanDateformat = dateObj.toLocaleString();
            setunixTime(humanDateformat);
        }
    }, []);

const MyMap = () => {
        return (
            <div>
                <NoSsrMap />
            </div>
        );
    };

Answer 1

Try this

  <StyledMapContainer
    watch
    enableHighAccuracy
    zoomControl
    center={{ lat: data?.longitude, lng: data?.latitude }}
    zoom={[15]}
    scrollWheelZoom={false}
  >

Answer 2

I think a part of index.js is missing but I see some improvements for your code right now.

First of all, you shouldn't use useEffect like that in index.js, this is not how useEffect works to do an async function, you can try something like this

useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get(`http://localhost:5000/${nr}`);
      // ... do something with data like setData
    };
    fetchData();
}, []);

This is because the useEffect method should be a normal function. After that, you could try passing data through props in the Map component, for example

const Map = ({data = {}}) => {
    return (
        <StyledMapContainer
            watch
            enableHighAccuracy
            zoomControl
            center={{ lat: data.longitude, lng: data.latitude }}
            zoom={[13]}
            scrollWheelZoom={false}
        >
            <TileLayer
                url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
                zoomControl={true}
            />
            <Marker position={{ lat: data.longitude, lng: data.latitude }} icon={MarkerIcon}>
                <Popup>The Ship is here!</Popup>
            </Marker>
        </StyledMapContainer>
    );
};

export default Map;

By doing this, your Map component does not depend on the page/index. When trying to pass props in dynamic import try this

const NoSsrMap = dynamic(() => import("../../atoms/map/index"), { ssr: false });
const MyMap = ({data}) => {
        return (
            <div>
                <NoSsrMap data={data} />
            </div>
        );
    };

And finally use MyMap in your index page

<MyMap data={data}/>

With this your map component should works correctly.