Splitting code into files using context api - reactjs

Question

I'm using context API for the first time.I can understand how to write the code in a single page.But I can't understand how to split it into several files.When I split it as below it gives me an error saying that I have not exported MyProvider.But I have done it.I searched for many video tutorials but I couldn't find a one that matches to my problem
App.js
import {MyProvider} from './Context';
import {myContext} from './Context';
class Name extends Component {
render() {
return (
<div>
<myContext.Consumer>
{(context) => (
<React.Fragment>
<h1>Hello, {context.state.name}</h1>
<h3>{context.state.address}</h3>
</React.Fragment>
)}
</myContext.Consumer>
</div>
);
}
}
class Age extends Component {
render() {
return (
<div>
<myContext.Consumer>
{(context) => (
<React.Fragment>
<h1>You are {context.state.age} years old</h1>
<h3>You were born in - {context.state.dob}</h3>
</React.Fragment>
)}
</myContext.Consumer>
</div>
);
}
}
class App extends Component {
render() {
return (
<MyProvider>
<div className="App">
<Name />
<Age />
</div>
</MyProvider>
);
}
}
export default App;
Context.js
export const myContext = React.createContext();
class MyProvider extends Component {
state = {
name: "Sam",
address: "No.35,Main Street,Galle",
age: 50,
dob: "1970-10-21"
}
render() {
return (
<myContext.Provider value={{
state: this.state
}}>
{this.props.children}
</myContext.Provider>
)
}
}
export default MyProvider;

Answer 1

You have a mistake in import. When you export as default, you should import it without curly braces.
export default CLASS
import CLASS from
Or you can export your class as export class, then you will import it as you do:
export class A
import { A }
UPD:
Please take a look at
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export