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

Reactjs – How to let component know which context calls the component?

Suppose I have a component and two contexts. The both contexts can use this component. When context1 uses it, the component should do const context=useContext(Context1) in itself. When context2 uses it, the component should do const context=useContext(Context2) in itself. But how can this component know which context is using it now and do the instuction?

Tags:

3

Answers


  1. 0

    You can try making storing some key value in the local storage and get the value in the component from there .

    like in context1 just add one line

    localStorage.setItem('currentcontext', 'context1');

    and in context2 be

    localStorage.setItem('currentcontext', 'context2');

    now then your component loads just retrive the value from the clocalstorage by

    var current = localStorage.getItem('currentcontext');

    then you will have the currently used context name stored in current named variable..

    i tried to answer based on how much i came to get your problem if you face any other issue do comment…

    Login or Signup to reply.
  2. 0

    If you’ve got a component that has to choose which context to use I think you should rethink your design. It would be much easier to help if you would explain what the two contexts are and what the component is doing with them, but you don’t seem willing to elaborate.

    Is there a reason you can’t have a single context whose value changes, instead of entirely separate contexts? I guess I’ll never know.

    If you insist on having two contexts and making your component choose between them you could have a context that specifies which context to use.

    const Context1 = React.createContext("I'm context one!");
const Context2 = React.createContext("I'm context two!");

const WhichContext = React.createContext(Context1);

function MyComponent() {
  const which = React.useContext(WhichContext);
  const context = React.useContext(which);
  
  return (
    <div>{context}</div>
  );
}

function App () {
  return (
    <WhichContext.Provider value={Context2}>
      <MyComponent />
    </WhichContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>


<div id="app"></div>

    You could also just pass it in as a prop:

    const Context1 = React.createContext("I'm context one!");
const Context2 = React.createContext("I'm context two!");

const WhichContext = React.createContext(Context1);

function MyComponent(props) {
  const context = React.useContext(props.context);
  
  return (
    <div>{context}</div>
  );
}

function App () {
  return (
      <MyComponent context={Context2} />
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>


<div id="app"></div>
    Login or Signup to reply.
  3. 0

    While I agree that the need to do this is probably a missunderstand of React design, should be not needed; and while ray answer seems more "React way" and elegant… I will give another option.

    You could add some flag or info in the default Context values that define if the Context is actually available:

    const Context1 = createContext({available: false})

const Component = () => {
   const context1 = useContext(Context1)
   console.log(context1.available)
   return <div />
}

    <Component /> // <-- will print "false"
<Context1.Provider value={{available: true}}>
  <Component /> // <-- will print "true"
</Context1.Provider>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search