React context - 'contextType' is not defined

Question

I am using react-dom@16.6.1 and react@16.6.1 that should support react Context and trying to run a simple example same as the react-context:

app.js

import React, { Component } from 'react';
import AppManger from './components/AppManger';
import './App.css';
export const ThemeContext = React.createContext({a1:'a1'});

class App extends Component {

  render() {

    return (

      <div className="App">
        <h1>Manage Storefront Services Products</h1>
        <ThemeContext.Provider value="dark">
          <AppManger />
        </ThemeContext.Provider>

      </div>

    );
  }
}

export default App;

AppManger.js(has no context reference)

import React, { Component } from 'react'
import SearchBar from './SearchBar';
export default class AppManger extends Component {


    constructor(props) {
        super(props);
        this.onSearchBarChange = this.onSearchBarChange.bind(this);
        this.state = {
            searchValue: '',
            errorLoading: false,
            errorObj: null,
        }
    }

    onSearchBarChange(e) {
        e.persist();
        this.setState({ searchValue: e.target.value });
    }

    render() {
        return (

            <div>
                <a href="/subsadmin/saml/logout">Log out</a>
                <SearchBar onSearchBarChange={this.onSearchBarChange} inAttrView={this.state.onAttrPage} />
            </div>

        )
    }
}

And the SearchBar.js where I want to use Context:

import React, { Component } from 'react';
import ThemeContext from '../App';


export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      showAttrModal: false
    };

  };


  componentDidMount(){
    console.log(this.context); //{}
  }

  render() {
    const contextType = ThemeContext;
    console.log(contextType); //{}
    return (

      <div>
        {contextType} /*'contextType' is not defined  no-undef */
        <input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />

      </div>

    )
  }
}

If I run the app I get Line 44: 'contextType' is not defined no-undef in SearchBar.js if I remove this line I get {} when I logging the this.context.

a value defined like -`export const ThemeContext = React.createContext({a1:'a1'});` in App.js — Itsik Mauyhas, Dec 25 '18 at 17:09
already Did it in SearchBar.js - `import ThemeContext from '../App';` — Itsik Mauyhas, Dec 25 '18 at 17:11
If you have multiple export and it's const. You must use `{ foo }` — Quynh Nguyen, Dec 25 '18 at 17:13

score 10 · Accepted Answer · answered Dec 25 '18 at 17:12

You aren't correctly using context, as you need to define it as a static property of the class and import it as a named import since you have exported it as a named import

import { ThemeContext } from '../App';

export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      showAttrModal: false
    };

  };

  static contextType = ThemeContext;
  componentDidMount(){
    console.log(this.context); //{}
  }

  render() {

    console.log(this.contextType); //{}
    return (

      <div>
        {contextType} /*'contextType' is not defined  no-undef */
        <input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />

      </div>

    )
  }
}

Works but to access the context I logged `ThemeContext` instead. Thank`s. — Itsik Mauyhas, Dec 25 '18 at 17:17
You can use ThemeContext but for some reason if you have a PureComponent in between the Provider and Consumer then I guess the re-render won't be triggered on context change — Shubham Khatri, Dec 25 '18 at 17:20

score 3 · Answer 2 · answered Dec 25 '18 at 17:10

3

You imported App instead of ThemeContext.

use import { ThemeContext } from '../App.js;

answered Dec 25 '18 at 17:10

Max Kuzmenko

66
3

Still the same result `{}`. – Itsik Mauyhas Dec 25 '18 at 17:14
1

Did you you `static contextType = ThemeContext; `? – Max Kuzmenko Dec 25 '18 at 17:20

Imanali Mamadiev · Answer 3 · 2018-12-25T17:10:49.993

0

Here problem:

componentDidMount() {
    console.log(this.context);
}

Here can't find this.context variable.

static contextType = 

To

const contextType =

edited Dec 25 '18 at 17:10

answered Dec 25 '18 at 17:06

Imanali Mamadiev

2,448
2
13
22

React context - 'contextType' is not defined

3 Answers3

Linked