CODEWITHSUNDEEP
reactjsreact-context
Saiful Islam Niloy
Saiful Islam Niloy

Reputation: 51

How to update context variable in ReactJS?

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?

Upvotes: 0

Views: 1963

Answers (1)

Punit Makwana
Punit Makwana

Reputation: 535

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

Upvotes: 2

Related Questions