¿Por qué el valor predeterminado de UserContext no ha cambiado incluso si especifico un valor en <UserContext.Provider>? ¿Cómo puedo anular el valor predeterminado del Contexto?
esta es la aplicación.jsx
import './App.css'; import React, { createContext } from 'react'; import ComponentB from './components/hooks/context/ComponentC'; function App() { return ( <div className="App"> <ComponentB /> </div> ); } export default App;este es el componente B
import React, { createContext, useState } from 'react'; import ComponentC from './ComponentC'; export const UserContext = React.createContext('default'); export const ChannelContext = React.createContext('default'); const provider = UserContext.Provider; function ComponentB() { return ( <div> <provider value='Username'> <ComponentC /> </provider> </div> ); } export default ComponentB;este es el ComponentC
import React from 'react'; import ComponentE from './ComponentE'; const ComponentC = () => { return <ComponentE />; } export default ComponentC;este es el ComponentE
import React, { Component, useContext } from 'react'; import { UserContext, ChannelContext } from './ComponentB'; const ComponentE = () => { const username = useContext(UserContext); const channel = useContext(ChannelContext); return <div>username : {username} channel : {channel}</div>; } export default ComponentE;En su archivo App.jsx, dice esto:
import ComponentB from './components/hooks/context/ComponentC'; ^ ^En la cadena, esto lleva a que se represente esto:
<div className="App"> <div> username : {username} channel : {channel} </div> </div>Como puedes ver, no hay proveedor.
Aún así, si arreglamos este error tipográfico de un carácter, el problema persiste.
Esto es porque dices
const provider = UserContext.Provider; ... <provider> ... </provider>que no está permitido.
Si lo haces
<UserContext.Provider> ... </UserContext.Provider>funciona.
https://codesandbox.io/s/wizardly-andras-csxxy?file=/src/App.js
Con respecto al primer problema, es por eso que debe hacer
export const MyComponent = () => <></>; import { MyComponent } from "./MyComponent";en vez de
const MyComponent = () => <></>; export MyComponent; import MyComponent from "./MyComponent";