Tengo 2 component en reaccionar. para ex Producer.js y Consumer.js. . no existe una relación parent child entre ellos.
Necesito establecer una variable en Producer.js y consumir ese valor en Consumer.js
Busqué en Google e intenté usar la context API , pero no funciona. Soy nuevo, así que no puedo resolver el problema.
entonces en producer.js .
const Name = createContext(false); const [isActive,setIsActive]=useState(false); <Name.Provider value={isActive}> </Name.Provider> y en consumer.js estoy tratando de consumir isActive .
<Name.Consumer value={isActive}> alert(isActive); </Name.Consumer>no está compilando.
ni siquiera puede reconocer isActive o value en Consumer.js . que mal estoy haciendo?. también puede sugerir si hay una mejor manera.
Editar: -1 En realidad tengo 2 componentes en la pestaña Menú. Usuario e Inventario. Necesito mostrar Usuario si el valor es verdadero; de lo contrario, no debería mostrarse.
<span > <Link to="Inventory">List of Inventory</Link> </span> <span> <Link to="user">List of User</Link> </span> Quiero que <Link to="user"> User</Link> esto se muestre cuando el valor sea true . de lo contrario, debería ser falso.
<Name.Consumer> {value => <span className="badge badge-white"> { value && <Link to="user"> List of Users</Link> } </span> } </Name.Consumer>.
Pestaña List of Users que muestra si el valor es true o false . ¿Cómo puedo modificar el código?
El consumidor no accede al valor de contexto como un accesorio, se accede como un componente de función secundario:
<MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer>
Para su ejemplo de consumidor, sería similar a lo siguiente:
<Name.Consumer> {value => { console.log(value); return value ? "Active": "Inactive"; }} </Name.Consumer> Sin embargo, ahora es más común usar el gancho useContext en un componente de función. Ejemplo:
const isActive = useContext(Name); useEffect(() => { console.log(isActive); }, [isActive]); return isActive ? "Active": "Inactive"