I have 2 component in react. for ex Producer.js and Consumer.js. . there is no parent child relationship between them.

I need to set one variable in Producer.js and consume that value in Consumer.js

I searched in google and tried using context API but it is not working. I am new so not able to resolve the issue.

so in producer.js.

 const Name = createContext(false);
  const [isActive,setIsActive]=useState(false);
  <Name.Provider value={isActive}>
            </Name.Provider>

and in consumer.js I am trying to consume isActive.

  <Name.Consumer value={isActive}>
        alert(isActive);
    </Name.Consumer>

it is not compiling.

it is not able to even recognize isActive or value in Consumer.js. what wrong I am doing?. you can also suggest if there is better way.

CodePudding user response：

The consumer doesn't access the context value like a prop, it's accessed as a child function component:

Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

For your consumer example, it would look similar to the following:

<Name.Consumer>
  {value => {
    console.log(value);
    return value ? "Active": "Inactive";
  }}
</Name.Consumer>

It is more common now to use the useContext hook in a function component though. Example:

const isActive = useContext(Name);

useEffect(() => {
  console.log(isActive);
}, [isActive]);

return isActive ? "Active": "Inactive"