CODEWITHSUNDEEP
reactjsreact-hooks
Orca Prime
Orca Prime

Reputation: 165

How to access provider value when using useContext hook

import React, { useContext } from 'react'
import { MyContext, MyProvider } from './Context'

const MasterContainer  = () =>{
    const ctx = useContext(MyContext)

    return (
        <MyProvider>
            {ctx}
            <MyContext.Consumer>
                {context=><div>{context.age}</div>}
            </MyContext.Consumer>  
        </MyProvider>
    )
}

export default MasterContainer

ctx right now is returning undefined when i actually want to pull ctx.age 

import React from 'react'


export const MyContext = React.createContext("dude")

export class MyProvider extends React.Component{
    state = {
        name: 'Hello',
        age: 12
    }
    render(){
        return (
            <MyContext.Provider value={this.state}>
                {this.props.children}
            </MyContext.Provider>
        )
    }
}

Basically i want to access the values of my state in my provider using hooks, how do i go about this?

Upvotes: 8

Views: 16482

Answers (2)

Jimi Pajala
Jimi Pajala

Reputation: 2378

Here is an very simple use case of createContext-method and updating current context value. CodeSandbox-example

Important to notice here, like described in React.js createContext-method documentation, context value will be matched to the closest matching Provider above in tree.

React.createContext - Creates an Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

Also keep in mind as stated in docs, default value argument is only used if no matching Provider is found.

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.

Upvotes: 6

Geocarlos
Geocarlos

Reputation: 136

Currently, in React 16.7.0 and ReactDOM 16.7.0, useContext does not seem to be working. For functional components, this worked for me:

// Theme context, default to light theme
const ThemeContext = React.createContext('light');

// Signed-in user context
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // App component that provides initial context values
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// A component may consume multiple contexts
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

For class-based components, it is even simpler:

   import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;

Reference: https://reactjs.org/docs/context.html

Upvotes: 1

Related Questions