CODEWITHSUNDEEP
javascriptreactjsmodulenext.js
Jaydendev
Jaydendev

Reputation: 163

Importing a variable from dynamically imported component

I have a (Map) component dynamically imported to my page.

const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, })

From that component I also want to import a variable.

const [taskImg, setTaskImg] = useState(null);


export {taskImg};

The component is dynamically imported because otherwise I get a window is not defined error, and this is the solution for that. Same with the variable. If I want to import it I get the above error. But I need to use the taskImg variable in this page. How can I do that?

Mapcomp:

import { MapContainer, TileLayer, useMap, Marker, Popup, 
ImageOverlay } from 'react-leaflet'
import { useEffect, useState } from "react";
import Head from "next/head"
import { LatLngBounds } from 'leaflet';

const Map = () => {


  const [userPos, setUserPos] = useState(null)
  const [taskPos, setTaskPos] = useState(null)
  const [task, setTask] = useState()
  const [taskImg, setTaskImg] = useState(null);


  const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])

useEffect(() => {
  
  function getRandomTask(arr) {

const randomIndex = Math.floor(Math.random() * arr.length);

const item = arr[randomIndex];

return item;
}

const tasks = [
  "boller",
  "placeholder"
];



setTask(getRandomTask(tasks));

},[])

useEffect(() => {

  if(task == "boller"){
    console.log("boller")
    setTaskImg("/sf2.jpg")
  } else if(task == "placeholder") {
    console.log("placeholder")
  }

},[task])

return (
<>
    <Head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>

        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
    </Head>

    <MapContainer 
    className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#738aaf]'
    center={[71.505, -40.09]} zoom={3} scrollWheelZoom={true} noWrap={true}>
    <ImageOverlay
      url="/allmaphres.png"
      bounds={bounds}
      opacity={1}
      zIndex={10}
    />
  </MapContainer>
</>
);
}

export default Map;

page (mapcomp is rendered here):

import { memo, useEffect, useMemo, useState } from "react";
import dynamic from 'next/dynamic'
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Head from "next/head";
const Map = dynamic(() => import('../components/Mapcomp'), {
  ssr: false,
})

const All = () => {

return (
  <>
<Navbar />

<div className="bg-white w-[500px] h-[100vh]">
  <div className="task border-4 border-red-500 h-[250px]">
    {/* taskImg && <img src={taskImg}/> */}
  </div>
  <div className="flex justify-center gap-[200px] text-xl">
    <span>Tasks:</span>
    <span>Points:</span>
  </div>
  <div className="flex justify-center gap-[240px] text-xl">
    <span>X</span>
    <span>X</span>
  </div>

</div>

<Map />
<Footer />
   </>   
  );
}

export default All;

Upvotes: 0

Views: 227

Answers (1)

Sarkar
Sarkar

Reputation: 1879

You can't export a state to another component you either need to use a state management library like redux or create a context which make the state available for all the other components

Upvotes: 1

Related Questions