CODEWITHSUNDEEP
javascriptreactjscomponents
Joseph K.
Joseph K.

Reputation: 1223

Using provider directly from context vs returning it from a function

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

Answers (1)

Jaisa Ram
Jaisa Ram

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

Related Questions