Fetching api and sending the state using Context api - reactjs

Question

This is my App.js below and on fetching the data and setState I am
unable to display the date in child, however my data is fetched in
console log. Even i have MyContext in separate file
//App.js
class MyProvider extends Component {
state = { userData: '' }
componentWillMount() {
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(userData => {
this.setState({ userData: userData })
console.log('here is list =')
console.log(userData);
});
}
render() {
return (
<MyContext.Provider value={{ state: this.state }}>
{this.props.children}
</MyContext.Provider>
);
}
}
class App extends Component {
render() {
return (
<div>
<MyProvider value={{ state : this.state }}>
<Header />
<User />
</MyProvider>
</div>
);
}
}
export default App;
//User.js
//Cannot display gender , email in below code
class User extends Component {
render() {
return (
<div>
<MyContext.Consumer>
{
(context) => (
<React.Fragment>
<p>Gender : {context.state.gender}</p>
<p>Email : {context.state.email}</p>
</React.Fragment>
)
}
</MyContext.Consumer>
</div>
);
}
}
export default User;

Answer 1

In the Context Provider you are setting the data inside userData state and hence you need to access it in consumer like context.state.userData.gender. Also since userData is an object after the response is available, you should initialise it as an object in Provider constructor as well otherwise you would need to add a check in the User component because accessing email and gender from userData
class MyProvider extends Component {
state = { userData: {} }
componentWillMount() {
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(userData => {
this.setState({ userData: userData })
console.log('here is list =')
console.log(userData);
});
}
render() {
return (
<MyContext.Provider value={{ state: this.state }}>
{this.props.children}
</MyContext.Provider>
);
}
}
class App extends Component {
render() {
return (
<div>
<MyProvider value={{ state : this.state }}>
<Header />
<User />
</MyProvider>
</div>
);
}
}
export default App;
User.js
class User extends Component {
render() {
return (
<div>
<MyContext.Consumer>
{
(context) => (
<React.Fragment>
<p>Gender : {context.state.userData.gender}</p>
<p>Email : {context.state.userData.email}</p>
</React.Fragment>
)
}
</MyContext.Consumer>
</div>
);
}
}
export default User;