While using React Context API ,unable to fetch data - reactjs

Question

This is my App.js , I am using context api but I am unable to fetch
data at {context.country} and {context.job} which is in child
component i.e Neighbour.
This is my App.js , I am using context api but I am unable to fetch
data at {context.country} and {context.job} which is in child
component i.e Neighbour.
App.js
import React, { Component } from 'react';
import Neighbour from './Neighbour';
const MyContext = React.createContext();
class MyProvider extends Component {
state = {
firstName: 'Tom', lastName: 'Holland', age: 24, country: 'America', job: 'Actor',
}
render() {
return (
<MyContext.Provider value={{
state: this.state, growOld: () => this.setState({ age: this.state.age + 1 })
}}>
{this.props.children}
</MyContext.Provider>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<MyProvider value={{ state: this.state }}>
<div>
<p>I am in App component</p>
<Family />
<br />
<Neighbour />
</div>
</MyProvider>
</div>
);
}
}
export default App;
Neighbour.js
import React, { Component } from 'react';
const MyContext = React.createContext();
class Neighbour extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<MyContext.Consumer>
{context => (
<React.Fragment>
<p>Country : {context.country}</p>
<p>Job : {context.job}</p>
</React.Fragment>
)}
</MyContext.Consumer>
</div>
);
}
}
export default Neighbour;

Answer 1

Since you are providing the value as object {state: this.state} to context, you need to use it like context.state.country in your consumer.
<MyContext.Consumer>
{context => (
<React.Fragment>
<p>Country : {context.state.country}</p>
<p>Job : {context.state.job}</p>
</React.Fragment>
)}
</MyContext.Consumer>
or you Provide the value in provider like
<MyProvider value={this.state}>
<div>
<p>I am in App component</p>
<Family />
<br />
<Neighbour />
</div>
</MyProvider>
Also in Neighbour component you re creating a context again which doesn't have a Provider and hence the value in Consumer would come undefined, you need to import the same context that you have used the Provider on
In Neighbour.js
Neighbour.js
import React, { Component } from 'react';
inport { MyContext } from 'path/to/context';