CODEWITHSUNDEEP
reactjs
Maneesh R
Maneesh R

Reputation: 13

Reactjs context in consumer is undefined

Trying to build a reactjs application. In AuthContext.Consumer I am getting authContext as undefined.

Tried to log the authContext within the consume and it shows as undefined. Why is the provider not passing the context to consumer?

What am I doing wrong?

import AuthContext from '../context/auth-context'
 
class App extends Component {
state = {
    persons: [
      {name: "John Doe", age: 20},
      {name: "Neal W", age: 21}
    ],
    isAuthenticated: false
}
// Provider:
 render() {    
    return(
        <AuthContext.Provider 
          value={{
              isAuthenticated: this.state.isAuthenticated, 
              login: this.loginClickHandler
          }}
        >
          <div>
          
            <Person 
              name={this.state.persons[0].name} 
              age={this.state.persons[0].age} 
              initname={true} 
              key={this.state.persons[0].id}
              changed={this.nameChangedHandler} 
              deleted={this.deletePersonHandler} 
            />
          </div>
        </AuthContext.Provider>
    );
  }
}
}
//Consumer
 
import React, { Component, useContext } from 'react';
import './Person.css';
import AuthContext from '../../../context/auth-context'
 
class Person extends Component {
    render() {
        return(
            <AuthContext.Consumer>
                    { 
                        (authContext) => {                                            
                            return (
                                <button className="btn btn-light btn-lg">{authContext.isAuthenticated ? "Logout" : "Login" }</button>
                            );
                        }
                    }
            </AuthContext.Consumer>   
        )
    }
};
export default Person;

Upvotes: 1

Views: 183

Answers (1)

ppak10
ppak10

Reputation: 2363

To add on to Aron's comment I've attached a small code snippet that uses console.log to display the authContext argument when the login button is clicked.

It appears that the consumer seems to be working properly here and the issue of an undefined value for authContext may be a result of the consumer component not being a child component of the provider component.

Without more information on the context and the structure of the application it is difficult to tell what exactly is causing the issue but you may want to double check that the AuthContext.Consumer component within the Person component is a child of the AuthContext.Provider component.

const AuthContext = React.createContext();
 
class App extends React.Component {
state = {
    persons: [
      {name: "John Doe", age: 20},
      {name: "Neal W", age: 21}
    ],
    isAuthenticated: false
}
// Provider:
 render() {    
    return(
        <AuthContext.Provider 
          value={{
              isAuthenticated: this.state.isAuthenticated, 
              login: this.loginClickHandler
          }}
        >
          <div>
          
            <Person 
              name={this.state.persons[0].name} 
              age={this.state.persons[0].age} 
              initname={true} 
              key={this.state.persons[0].id}
              changed={this.nameChangedHandler} 
              deleted={this.deletePersonHandler} 
            />
          </div>
        </AuthContext.Provider>
    );
  }
}


//Consumer
class Person extends React.Component {
  render() {
    return(
      <AuthContext.Consumer>
      {(authContext) => {                                            
        return (
          <button onClick={() => console.log(authContext)}>
            {authContext.isAuthenticated ? "Logout" : "Login" }
          </button>
        );
      }}
      </AuthContext.Consumer>   
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions