MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
Created A context separate js file where i can access in my parent as well as my child component
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
Message: "Welcome React",
ReturnMessage:""
};
}
render() {
return (
<MyContext.Provider value={{state: this.state}}>
<Child />
</MyContext.Provider>
)
}
}
So created a parent component, with Provider context and calling child component in provider tab
Child.js
import MyContext from "./MyContext.js";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
ReturnMessage:""
};
}
ClearData(context){
this.setState({
ReturnMessage:e.target.value
});
context.state.ReturnMessage = ReturnMessage
}
render() {
return (
<MyContext.Consumer>
{(context) => <p>{context.state.Message}</p>}
<input onChange={this.ClearData(context)} />
</MyContext.Consumer>
)
}
}
So in child by using consumer can display the in child render part..
I'm facing to update from consumer to provider state.
How to update provider state or manipulate state of provider ..
{this.props.context.state.Message}