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.
Edit:-1 I have actually 2 component in Menu tab. User and Inventory. I need to display User if value is true otherwise it should not display.
<span >
<Link to="Inventory">List of Inventory</Link>
</span>
<span>
<Link to="user">List of User</Link>
</span>
I want <Link to="user"> User</Link> this to display when value is true. otherwise it should be false.
<Name.Consumer>
{value =>
<span className="badge badge-white">
{ value && <Link to="user"> List of Users</Link> }
</span>
}
</Name.Consumer>
.
List of Users tab displaying whether value is true of false. How can I modify the code?
The consumer doesn't access the context value like a prop, it's accessed as a child function component:
<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"