Passing variable to other pages in react

Question

I have to make global variable to be taken for all pages in the reactJs application. It is named as 'city' where it changes every time I am using useState of reactJs. The city is only changed in Mainpage of the react site. When I change the city in Mainpage and direct it to other pages then the changed value of the city is not taken. It remains the default that I declared at app.js. I checked it by printing the city in the console in app.js and it changes every time when I change it in MainPage which is correct, but when I direct it to other pages the default value of the city i.e, 'Select city' is taken. I use the functional component. The image of the declaration of the variable and routing is given in the image. Mainpage is changing the city in app.js but it is not forwarded to other pages. The default value is taken for it. I want that whenever the value of the city is changed in the MainPage the effect will show in the app.js, which is working, and also to the other pages when I go to them just like, 'https://www.nobroker.in/home-services', them. But the changes are not reflected to other pages. I am using tag to redirect the window to other pages.

The code of app.js is:

function App() {

const [city, setCity] =useState("Select City")

const handleData = (data) => { setCity(data) } console.log(city);

return (

  {/* home page  */}
  <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />

  {/* footer pages  */}
  <Route exact path='/home-services/terms-and-conditions' element={<HouseDeckHomeServicesTC/>} />
  <Route exact path='/home-services/privacy-policy' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/return-exchange-and-refund' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/faqs' element={<HouseDeckHomeServicesFAQpage />} />

  {/* services pages  */}
  <Route exact path='/home-services/painting' element={<HouseDeckHomeServicesPainting city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/cleaning' element={<HouseDeckHomeServicesCleaning city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/home-sanitization' element={<HouseDeckHomeServicesSanitization city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/ac-repair' element={<HouseDeckHomeServicesACRepair city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/electrician' element={<HouseDeckHomeServicesElectrician city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/carpentary' element={<HouseDeckHomeServicesCarpentary city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/plumbing' element={<HouseDeckHomeServicesPlumbing city={city} setCity={setCity} handleData={handleData} />} />

  {/* 404 page  */}
  <Route exact path='*' element={<HouseDeckHomeServicesNotFound city={city} />} />
</Routes>
</BrowserRouter>

); }

enter code here

please help.

Answer 1

You can use useContext to pass props from parent to child

CityContext.js

import React from 'react';

const CityContext = React.createContext({
  city: '',
  handleChangeCity: (value) => {}
  handleData: (value) => {}
})

export const CityProvider = CityContext.Provider;
export const CityConsumer = CityContext.Consumer;
export default CityContext ;

app.js

import { CityProvider } from './CityContext';

function App() {

  const [city, setCity] =useState("Select City")
  const handleData = (data) => { setCity(data) } console.log(city);

  return (
    <CityProvider
      value={
        city={city}
        handleChangeCity={setCity}
        handleData={handleData}
      }
    >
      <BrowserRouter>
        <Routes>
          // here you do not need add props to the routes
          <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage />} />
          <Route exact path='/' element={<HouseDeckHomeServicesMainPage />} />
          ...
        </Routes>
      </BrowserRouter>
    </CityProvider>
  )

HouseDeckHomeServicesMainPage.js

import React, { useContext } from 'react';
import CityContext from './CityContext';

function HouseDeckHomeServicesMainPage() {
  // This is states in app.js (city, setCity, handleData)
  const { city, handleChangeCity, handleData } = useContext(CityContext);
  const handleChangeName= (value) => {
    handleChangeCity(value)
  }

  return (
    <>
      <p>{city}</p>
      <select value={city} onChange={(e) => handleChangeName(e.target.value)}>
        <option />
        <option />
      </select>
    <>
  )
}