How to use React Context inside function of Class component

Question

How can I access objects inside of React Context inside a function of a Class Component.

I've got the following React Component

import StoreContext from '../../context/StoreContext'

class ProductForm extends Component {
  static contextType = StoreContext

  constructor(props) {
    super(props);

  }

  handleOptionChange(event) {

    const test = this.contextType.client.testObject

  }

I've tried accessing the client object inside the context like this but It doesn't work because it says cant read the property of undefined.

I'm wondering where my mistake is.

Which version of react are you using?

Jjagwe Dennis
– Jjagwe Dennis

2019-02-02 19:12:56 +00:00
Commented Feb 2, 2019 at 19:12 — Jjagwe Dennis
– Jjagwe Dennis, Commented Feb 2, 2019 at 19:12
@JjagweDennis 16.6

Alexander Hörl
– Alexander Hörl

2019-02-02 19:14:34 +00:00
Commented Feb 2, 2019 at 19:14 — Alexander Hörl
– Alexander Hörl, Commented Feb 2, 2019 at 19:14

Jjagwe Dennis · Accepted Answer · 2019-02-02 19:14:57Z

21

Change this to context instead of contextType

this.context.client.testObject

i.e Your code should look like

import StoreContext from '../../context/StoreContext'

class ProductForm extends Component {
  static contextType = StoreContext

  constructor(props) {
    super(props);

  }

  handleOptionChange(event) {

    const test = this.context.client.testObject

  }

Leave the static propery as context type and access context in methods as using this.context

answered Feb 2, 2019 at 19:14

Jjagwe Dennis

1,87312 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nick · Accepted Answer · 2020-08-24 10:13:49Z

7

I would describe using context in a class component in 3 steps

define the context object with a value you want to share with entire app

const StaticBackEditor = React.createContext({isDebug: true})

wrap the entire app this context and set the values

function App() {
    return (
        <Provider store={store}>
            <StaticBackEditor.Provider value={{isDebug: true}}>
                <div className="App">
              <Layout />
        </div>
                </StaticBackEditor.Provider>
            </Provider>
        )

use the value in a component

class Tree extends React.Component<IProps, IState> {
    // this must be named contextType!
    static contextType = StaticBackEditor 
}

// its wired that we need to access a static field through this , but you do!
{this.context.isDebug && <span className="debug">

edited Aug 24, 2020 at 10:13

answered Aug 24, 2020 at 9:54

nick

7188 silver badges9 bronze badges

1 Comment

Saeed Hemmati Over a year ago

Not working as you wrote!

Collectives™ on Stack Overflow

How to use React Context inside function of Class component

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related