Context returns undefined - react-native

Question

My context returns undefined so I cannot get the name value from provider.
I made a snack at https://snack.expo.io/#johanmelin/functional-context
The code looks like
import React from 'react';
import { Text } from 'react-native';
const DataContext = React.createContext();
const DataProvider = props => {
const [name, setName] = React.useState("John");
return (
<DataContext.Provider value={name}>
{props.children}
</DataContext.Provider>
)
}
function App (props) {
const data = React.useContext(DataContext);
return (
<DataProvider>
<Text>hi {data.name}</Text>
</DataProvider>
)
}
export default App;
Can anyone see what I'm missing?

Answer 1

Provider needs to be setup before consumer. In your code, App gets render first, so you are trying to use the context before the provider is setup.
so your code should be something like this:
import React from 'react';
import { Text } from 'react-native';
const DataContext = React.createContext();
const DataProvider = props => {
const data = React.useContext(DataContext);
return (
<Text>
{data.value}
</Text>
)
}
function App () {
const [name, setName] = React.useState("John");
return (
<DataContext.Provider value={name}>
<DataProvider />
</DataContext.Provider>
)
}
export default App;