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 ponent, most of them use it in class ponent. 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;

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 ponent, most of them use it in class ponent. 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;

• javascript
• reactjs

3 Answers 3

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

One of those hooks is the useContext hook which allows you to connect a functional ponent 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 ponent in the tree.

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

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

  // wrap your ponent 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/docs/context.html

For functional ponent, 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)