Reputation: 1223
I'm noticing something new I haven't seen before. It is possible that this isn't specific to this react component.
I tried creating a react context
const MyContext = createContext({...});
Then, I wrote a function to return the provider
const MyProvider = () => {
return <MyContext.Provider value={...} />;
};
<MyProvider />
is a function type React component and <MyContext.Provider />
is an object type React component
When <MyProvider />
is used to wrap components, the React app crashes. However, directly using <MyContext.Provider />
works like I expected.
Since those two aren't the same, is it possible to create a provider component externally and import it elsewhere to use it?
Upvotes: 0
Views: 288
Reputation: 1767
export const MyProvider = (props) => { return ( <MyContext.Provider value={...} /> { props.children } </MyProvider> ); };
We can import it like :
import { MyProvider } from '../path'
use
<MyProvider><YouComponent/></MyProvider>
Upvotes: 1