Context API react functional component

Question

As I'm new to react I was searching for a way to use context api in my react app but couldn't find a way to use context api in functional component, most of them use it in class component. sorry for my question...

//this is my Context

    import React,{ createContext, Component } from 'react';
    export const ProductContext = createContext();
    class ProductContextProvider extends Component {
    state = {
        light: 'a',
        dark: 'b'
    }
    render() {
        return(
            <ProductContext.Provider value={{...this.state}}>
                {this.props.children}
            </ProductContext.Provider>
        );
    }
}

export default ProductContextProvider;

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

With React 16.8, we got something called Hooks. Hooks allow developers to mimic class component functionality inside a functional component.

One of those hooks is the useContext hook which allows you to connect a functional component to a context.

const value = React.useContext(MyContext);

From the documentation:

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

When the nearest <MyContext.Provider> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 23, 2019 at 6:39

user6612182

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

Comments

Lelouch · Accepted Answer · 2019-09-23 06:48:21Z

6

  // first define your context
  const MyContext = React.createContext();

  // wrap your component that should use the context
  <MyContext.Provider value={yourValue}>
    <YourComponent />
  </MyContext.Provider>

  // then inside YourComponent call useContext hook
  import {useContext} from React

  function YourComponent() {
    const contextValue = useContext(MyContext)
    return <div>{/* anything */}</div>
  }

Please refer to this link: https://reactjs.org/docs/context.html

answered Sep 23, 2019 at 6:48

Lelouch

9707 silver badges19 bronze badges

Comments

NCM · Accepted Answer · 2019-09-23 06:41:11Z

For functional component, you can use useContext. e.g. In consumer

import React, { useContext } from 'react'
import { ProductContext } from 'my/path/to/context'
function MyComponent() {
  const {light, dark} = useContext(ProductContext)
  return <div>hello</div>
}

From my opinion, I will create my a custom hooks as useContext(ProductContext) and put it in the same file of createContext(). i.e.

import React,{ createContext, Component, useContext } from 'react';
export const ProductContext = createContext();
class ProductContextProvider extends Component {
state = {
    light: 'a',
    dark: 'b'
}
render() {
    return(
        <ProductContext.Provider value={{...this.state}}>
            {this.props.children}
        </ProductContext.Provider>
    );
}
}
export default ProductContextProvider;

// custom hooks
export const useProduct = () => useContext(ProductContext)

Collectives™ on Stack Overflow

Context API react functional component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related