How to update context variable in ReactJS? - reactjs

Question

import React, { Component } from 'react'
export default class Class extends Component {
constructor(){
super();
this.state={
data:"NULL"
};
}
setData(value) {
this.setState({ data:value})
}
render() {
return (
<div>
<div>{this.state.data}</div>
<button onClick={()=>this.setData("Say Hi!")}>
Say Hi!
</button>
<button onClick={()=>this.setData("Say Hello!")}>
Say Hello!
</button>
</div>
)
}
}
Now i want to maintain this state using Context API(global state).
MyContext Class:
import React, { useState } from 'react';
const ClassContext = React.ClassContext();
const ClassProvider = (props) => {
const [data, setData] = useState("NULL");
return (
<ClassContext.Provider
value={{
data,
setData,
}}>
{props.children}
</ClassContext.Provider>
)
}
export { ClassContext, ClassProvider };
We can update state variable inside function in the first code snippet. But how to do the same update with context api?

Answer 1

Here is the working example
import React, { useState, createContext, Component } from "react";
const ClassContext = createContext();
export default function App() {
return (
<ClassProvider>
<Class />
</ClassProvider>
);
}
function ClassProvider(props) {
const [data, setData] = useState("NULL");
return (
<ClassContext.Provider value={{ data, setData }}>
{props.children}
</ClassContext.Provider>
);
}
class Class extends Component {
render() {
const { data, setData } = this.context;
return (
<div>
<div>{data}</div>
<button onClick={() => setData("Say Hi!")}>Say Hi!</button>
<button onClick={() => setData("Say Hello!")}>Say Hello!</button>
</div>
);
}
}
Class.contextType = ClassContext;
CSB example - I might delete CSB example at some point.
Alternatively you can also consume data and setData in class as
class Class extends Component {
render() {
return (
<ClassContext.Consumer>
{({ data, setData }) => (
<div>
<div>{data}</div>
<button onClick={() => setData("Say Hi!")}>Say Hi!</button>
<button onClick={() => setData("Say Hello!")}>Say Hello!</button>
</div>
)}
</ClassContext.Consumer>
);
}
}
In the above example you dont need to assign contextType property to class