React Context API examples

*context api example for me, myself, and i

2 ways to use context api with inital value

hoge.contex.jsx

import { createContext } from ‘react’
import HOGE_DATA from ‘./hoge.data.js’ // some data with values

const HogeContext = createContext(HOGE_DATA)

export default HogeContext

1 using Context.Consumer

foo.jsx

import HogeContext from ‘hoge.context.jsx’

<HogeContext.Consumer>
{
    data => {
        const  hogeData = data[hoge]
        const { foo, blah } = hoge
        return (
            use the destructure data as arguments
        )

    }
}
</HogeContext.Consumer>

2 useContext

foo.jsx

import { useContedt } from ‘react’


const data = useContext(HogeContext)
const hogeData = data[hoge]
const { foo, blah } = hogeData

return (
    <div className=‘foo’>{foo}/>
    <div className=‘blah’>{blah}/>
)

To dynamically set values to context

hoge.context.jsx

import { createContext } 

const HogeContext = createContext(undefined)

export default HogeContext

foo.jsx

import { useContext } from ‘react’
import { HogeContext } from ‘hoge.context’

const foo = {
    bool: true,
    method : () => concsole.log(“blah”);
}

<HogeContext.Provide value={foo}r>
    <Component />
<HogeContext.Provider>

component.jsx

import { useContext } from ‘react’
import HogeContext from ‘hoge.context’

const { bool, method } = useContext(HogeContext)

but this is bad practice so....

make context with initial values and pass local values

hoge.context.jsx

import { createContext } 

const HogeContext = createContext({
    bool: true,
    method: () => {}
})

export default HogeContext

foo.jsx

import { useState, useContext } from ‘react’
import { HogeContext } from ‘hoge.context’

const [bool, setBool] = useState(true)
const method = () => setBool(!bool)

<HogeContext.Provide value={{
    bool,
    method,
}}r>
    <Component />
<HogeContext.Provider>

component.jsx

import { useContext } from ‘react’
import HogeContext from ‘hoge.context’

const { bool, method } = useContext(HogeContext)

or create a provider

hoge.provider.jsx

import React, { createContext, useState, useEffect } from 'react';

import {
    addItemToHoge,
    removeItemFromHoge,
    HogeItem,
    totalHogeItem,
    totalHogePrice,
} from ‘./hoge.utils.js';

export const HogeContext = createContext({
    hidden: true,
    toggleHidden: () => {},
    hogeItems: [],
    addItem: () => {},
    removeItem: () => {},
    clearItemFromHoge: () => {},
    hogeItemsCount: 0,
    totalPrice: 0,
});

const HogeProvider = ({ children }) => {
    const [hidden, setHidden] = useState(true);
    const [hogeItems, setHogeItems] = useState([]);
    const [hogeItemsCount, setHogeItemsCount] = useState(0);
    const [totalPrice, setTotalPrice] = useState(0);

    const addItem = (item) => setHogeItems(addItemToHoget(hogeItems, item));
    const removeItem = (item) =>
        setHogeItems(removeItemFromHoge(hogeItems, item));
    const clearItemFromHoge = (item) => setHogeItems(clearItem(hogeItems, item));

    const toggleHidden = () => setHidden(!hidden);

    useEffect(() => {
        setHogeItemsCount(totalHogeItem(hogeItems));
        setTotalPrice(totalHogePrice(hogeItems));
    }, [hogeItems]);

    return (
        <HogeContext.Provider
            value={{
                hidden,
                addItem,
                toggleHidden,
                hogeItems,
                removeItem,
                clearItemFromHoge,
                hogeItemsCount,
                totalPrice,
            }}
        >
            {children}
        </HogeContext.Provider>
    );
};

export default HogeProvider

index.js

import HogePorvider from ‘’hoge.provider’

<HogeProvider>
    <App/>
<HogeProvider>