this.props.children dosent render - reactjs

Question

Im new to react and Im trying to understand context.
So I tried to create a provider and a consumer for user.
Ftm Im just trying to show the value but im going to pass it into the router and other components later.
This is the provider
const UserContext = React.createContext();
// Create an exportable consumer that can be injected into components
export const UserConsumer = UserContext.Consumer
// Create the provider using a traditional React.Component class
class UserProvider extends React.Component {
render() {
return (
// value prop is where we define what values
// that are accessible to consumer components
<UserContext.Provider value={{
username: 'Crunchy Crunch',
dateJoined: '9/1/18',
membershipLevel: 'Silver'
}}>
{this.props.children}
</UserContext.Provider>
)
}
}
And this is the app:
class App extends React.Component {
render() {
return (
<UserProvider>
<Fragment>
<Router>
<Nav />
<UserConsumer>
{state => (
<p>Username: {state.username}</p>
)}
</UserConsumer>
<Switch>
<ProtectedRoute exact path="/profile" component={Profile} />
<Route exact path="/" component={Index} />
</Switch>
</Router>
</Fragment>
</UserProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
I dont get any errors in the terminal but I get this message in the browser:
Functions are not valid as a React child. This may happen if you
return a Component instead of from render. Or maybe you
meant to call this function rather than return it.
What is the error and is there something fundamental Im not doing correctly.
Br

Answer 1

I have taken you code snippets and run it in codesandbox and it seems ok to me, without seeing the rest of you files its hard to say what the issue. Maybe it to do with how you are importing and using react router. Here is my working snippets
// App
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route } from "react-router";
import Page1 from "./Page1";
import Nav from "./Nav";
import UserProvider, { UserConsumer } from "./Provider";
import "./styles.css";
function App() {
return (
<UserProvider>
<Router>
<Nav />
<UserConsumer>
{state => <p>Username: {state.username}</p>}
</UserConsumer>
<Switch>
<Route exact path="/" component={Page1} />
</Switch>
</Router>
</UserProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
// Provider
import React from "react";
const UserContext = React.createContext();
// Create an exportable consumer that can be injected into components
export const UserConsumer = UserContext.Consumer;
// Create the provider using a traditional React.Component class
export default class UserProvider extends React.Component {
render() {
return (
// value prop is where we define what values
// that are accessible to consumer components
<UserContext.Provider
value={{
username: "Crunchy Crunch",
dateJoined: "9/1/18",
membershipLevel: "Silver"
}}
>
{this.props.children}
</UserContext.Provider>
);
}
}
Here is a link to the the working codesandbox
https://codesandbox.io/s/sweet-smoke-y3t9j