CODEWITHSUNDEEP
javascriptreactjs
user818700
user818700

Reputation:

React Context Not Working

I've generated a project using create-react-app.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import AuthProvider from './AuthProvider';

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);
registerServiceWorker();

AuthProvider.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class AuthProvider extends Component {

  childContextTypes = {
    test: PropTypes.string
  };

  getChildContext() {
    return {
      test: "Hello World!"
    }
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          AuthProvider test: {this.context.test} // NOT WORKING
        </p>
      </div>
    );
  }
}

export default App;

But calling {this.context.test} in App.js doesn't seem to work. I don't get an error either, so I'm at a bit of a loss here.

Upvotes: 1

Views: 9168

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

You need to define contextTypes for child in order to access it.

According to the docs:

If contextTypes is not defined, then context will be an empty object.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          AuthProvider test: {this.context.test} 
        </p>
      </div>
    );
  }
}

App.contextTypes = {
   test: PropTypes.string
}

Upvotes: 0

Arman Charan
Arman Charan

Reputation: 5797

It appears App is missing a contextTypes declaration.

If contextTypes is not defined, then context will be an empty object.

Try

import PropTypes from 'prop-types'

App.contextTypes = {
  test: PropTypes.string
}

Upvotes: 2

Related Questions