How to use context using the hook useContext?

Hello.
App.tsx
const Hello = createContext<string>('Hello');

function App() {
 return (
 <Hello.Provider value='Hi'>
 <MyComponent />
</Theme.Provider>
);
}
export default App;

MyComponent.tsx
const MyComponent: React.FC<> = () => {
 const msg = useContext<string>(Hello);
 return (
<span>{msg}</span>
)
}

Writes in the component:
Cannot find name 'Hello'.ts(2304)

Everything is simplified to the maximum.
March 23rd 20 at 19:03
1 answer
March 23rd 20 at 19:05
Solution
rewrote the answer
here Doc

HelloContext
const Hello = createContext<string>('Hello');
export default Hello;


App.tsx
import Hello from 'HelloContext';
import MyComponent from 'MyComponent';

function App() {
 return (
 <Hello.Provider value='Hi'>
 <MyComponent />
</Hello.Provider>
);
}
export default App;


MyComponent.tsx

import HelloContext from 'HelloContext';

const MyComponent: React.FC<> = () => {
 const msg = useContext(HelloContext );
 return (
<span>{msg}</span>
)
}

export default MyComponent;


PS
</Theme.Provider> <-- where is Theme?
did not understand: Provider wrap and all
in the documentation saw nothing of the sort, they write that we need, but about import anything.
I can't even imagine...
it can be an example and preferably a link to the docks....
I've now read and in an emphasis don't see it - Chaim.Stokes85 commented on March 23rd 20 at 19:08
@Chaim.Stokes85,

in the documentation saw nothing similar
I've now read and in an emphasis don't see it

You about ES6 module system you need to read. At the docks React such things do not understand, they are written with the expectation that you know all this.

Just move the context in a separate file and import at the place of use. If you do export and import from the App in MyComponent, you will have a circular dependency. - jayden92 commented on March 23rd 20 at 19:11

Find more questions by tags ReactTypeScript