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?

OK, I will give an easy example of it but the real situation is more complex than it, for example, Common is wrapped many times and the two components look different.

The common component

export default function Common(){
  const context=useContext(/*one of the context*/);
  context.setData(newData);
  return (
     <div>{context.data}</div>
  )
}

Component1

export const Context1 = createContext({ data, setData });

export default function Component1() {
  <Context1.Provider value={{data, setData }}>
     <Common />
  </Context1.Provider>
}

Component2

export const Context2 = createContext({ data, setData  });

export default function Component2() {
  <Context2.Provider value={{data, setData }}>
     <Common />
  </Context2.Provider>
}

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.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

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 />);

<!-- language: lang-html -->

<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>

<!-- end snippet -->

You could also just pass it in as a prop:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

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 />);

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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...

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>

Edit, more clearly for your specific use with two contexts:

const Context1 = createContext({available: false, /* your other Context1 default values */})
const Context2 = createContext({available: false, /* your other Context2 default values */})

const Component = () => {
   const context1 = useContext(Context1)
   const context2 = useContext(Context2)
   if(context1.available) {
      console.log("Context1 is available, use it as needed")
   } else if(context2.available) {
      console.log("Context2 is available, use it as needed")
   } else {
      console.error("No context1 or context2 found!!")
   }
   return <div />
}

<Context1.Provider value={{available: true, /* other context1 values */}}>
  <Component />
</Context1.Provider>
<Context2.Provider value={{available: true, /* other context2 values */}}>
  <Component />
</Context2.Provider>

Of course, this won't help if the contexts are "nested".