Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Using context to store variable globally React.js

I want to store a global variable that’s mutable and accessible in all files of my React.js project, including index.js where the ApolloClient is rendered. At first, I thought to create a class but I wasn’t sure how to implement that and save the state of the variable across multiple pages. Upon doing research, I discovered the use of context, but I don’t quite understand the documentation. Please advise what the best practice would be. Thank you.

Edit:

I attempted to import a global variable, but that isn’t mutable. I also attempted making a class that extends React.Component, to access functionalities such as useState() but a class of that nature must return a component if I understand correctly. Upon reading into Context more, I’m starting to gain a little more understanding, but I still don’t fully understand how to implement it.

I created a file AuthHandler:

import { createContext } from 'react';

export var AuthData = {
    id: createContext(0),
    auth: createContext("")
}

I want to mutate that data in a component function, and then access it in index.js. How would I go about doing that?

Tags:

2

Answers


  1. 0 
    if u want to store a variable globally u can use context api or redux-tool 
kit
here i am giving a rough idea how u can achieve this using context API
first Create A folder usually context.. inside this create a file usually 
name as DataProvider.jsx and do thing like this

 ```import { createContext, useState } from 'react';

export const DataContext = createContext(null);

const DataProvider = ({ children }) => {

const [Client, setClient] = useState([]);


return (
    <DataContext.Provider value={{
       Client, setClient
    }}
    >
        {children}
    </DataContext.Provider>
)

    }

    export default DataProvider; ```

next step u should wrap your app.js like this

    
  function App() {
  return (
  <DataProvider>
    <Home />
  </DataProvider>
  );
}


  export default App;```
now u can setclient or u can use client data like below

assume u have a file name Client.jsx where u want to set the client data
enter code here

```const { setCleint} = useContext(DataContext);```
set the Client data to setClient just as normal state
now in similar way u can render the client list anywhere like this

```const { Cleint} = useContext(DataContext);```
    Login or Signup to reply.
  2. 0

    Your use case here will be consumed by something outside of React (an Apollo Link), so Context does not make any sense here – Context would make a value available to children in the React tree, but your link is not a child in a React Tree.

    Instead you can just export an object and modify that object (you probably cannot reassign it depending on how you import/export it, but you can always modify it).

    // index.js
export const globalData = {
  auth: null
}

    // anywhere else
import { globalData } from './index.js'

globalData.auth = "foo"

    That said, you can only work with global data like this if you are not using SSR. If you are using SSR (e.g. in a Client Component in Next.js), you’d need to find another way of doing that.

    In that case, you could use Apollo CLient’s defaultContext.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search