I'm trying to create a global variable that holds false and true when the user switches between view1 and view2. I want to use the Context API to create this global variable with a separate Context.js file that holds the Context and Providers, wrap the components in the App.js file, and consume the context by getting the value of the variable in a function in the appropriate components. I tried following tutorials but I keep getting a displayContext is not defined error, where am I going wrong?

Context.js

    import React, {createContext, useState} from "react";
    
    const viewContext = createContext();
    const viewProvider = ({children}) => {
        const[display, setDisplay] = useState(true);
        return(
            <viewContext.Provider value = {display}>
                {children}
            </viewContext.Provider>
        );
    };
    
    export {viewProvider};

App.js

import React from "react";
import Session from "./components/Session";
import Map from "./components/Map";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
import { viewProvider } from "./components/Context";

const App = () => {
  return (
      <viewProvider>
        <Router>
                    <div className="App">
                    <Navbar />
                    <Routes>
                    <Route path="/" exact element={<Map />} />
                    <Route path="/session" element={<Session />} />
                    </Routes>
                </div>
              </Router>
      </viewProvider>
  );
};

export default App;

Map.js

import React, {useContext} from "react";
function Map(){
const display = useContext(viewContext);
console.log("the value of display is", {display});
return(
<div>
//some stuff
</div>
};
}

CodePudding user response：

import React, {useContext, useState} from "react";

export const defaultSpeedDialContext = [true, () => {
}];
const SpeedDialContext = React.createContext(defaultSpeedDialContext)
export default SpeedDialContext;


export function SpeedDialContextContainer({children}) {
    const [visibility, setVisibility] = useState(defaultSpeedDialContext.visibility)


    return (
        <SpeedDialContext.Provider
            value={[
                visibility,
                setVisibility
            ]}>
            {children}
        </SpeedDialContext.Provider>
    )
}


export function useSpeedDialContext() {
    return useContext(SpeedDialContext)
}

And you can use useSpeedDialContext() in your component

CodePudding user response：

You need to export viewContext from your Context file:

export const viewContext = createContext(); 

and import it into your Map.js file:

import { viewContext } from 'Context' 

You should also provide setDisplay as value in your Context.js:

<viewContext.Provider value={[display, setDisplay]}>
    {children}
</viewContext.Provider>

Which would necessitate changing

const display = useContext(viewContext) 

to

const [display] = useContext(viewContext) 

in Map.js

CodePudding user response：

if you can use redux... its very easy for you, do this.

                                                                                                    
npm install @reduxjs/toolkit --save                                                                                             
npm install  react-redux --save 
                                                                                                
INDEX.js                    reducer.js                                                                              
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

//Redux
import { Provider } from 'react-redux'; // provider ekt wad
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './Redux_State_Mangement/Reducer_Actions';

const store = configureStore({
  reducer: { userFromIndexjs: userReducer },
})

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

//Reducers.js
import { createSlice } from '@reduxjs/toolkit'
export const userSlice = createSlice({
    name: ""user"",
    initialState: {
        //pass krn data obj ek hadagatta
        value: { name: ""savindu pasintha"", age: """", email: """" },
        loginData: { name: """", age: """", email: """" },
        profileData: { name: """", age: """", email: """" },
        fetchAllData: [{ name: """", age: """", email: """" }]
    },
    reducers: {
        login: (state, action) => { state.value = action.payload },
        loginDataAction: (state, action) => { state.loginData = action.payload },
        profileDataAction: (state, action) => { state.profileData = action.payload },
        fetchAllDataAction: (state, action) => { state.fetchAllData = action.payload },
    }
})

//export actions to use in login.js file or we
export const { login, loginDataAction, profileDataAction, fetchAllDataAction } = userSlice.actions;
//index.js eke reducer
export default userSlice.reducer;"  
                                                                            
                                                                                                    
Profile.js                                                                          
import React from 'react';
import { useSelector } from 'react-redux';

export default function Profile() {
    //index.js eke reduser ekekn userFromIndexj ekaccess krn ek 
//-> features eke initial stste eke value kiyn obj ek
    const dataObj = useSelector((state) => state.userFromIndexjs.value);

    return (
        <div>Profile
            <div>
                <h1>Name : {dataObj.name}</h1>
                <h1>Age :{dataObj.age} </h1>
                <h1>Email : {dataObj.email} :</h1>
            </div>
        </div>
    )
}"  

//Login.js              
import React from 'react';
import { useDispatch } from 'react-redux';
import { login } from '../Reducer_Actions';
export default function Login() {
    const dispatch = useDispatch();
    //dispatch({ name: ""kamal"", age: ""20"", email: ""[email protected]"" });

    return (
        <div>Login page
            <div>
                <button onClick={() => { dispatch(login({ name: ""kamal"", age: ""20"", email: ""[email protected]"" })); }}>Login</button>
            </div>
        </div>
    )
}