【React】Uncaught ReferenceError: createContent is not definedの対処法

createContextを使用する際に下記エラーが出ました。 エラー内容は、createContent が定義されてないというものです。

Uncaught ReferenceError: createContent is not defined
    at Module.<anonymous> (HogeCreate.jsx:29)
    at Module../src/containers/HogeCreate.jsx (HogeCreate.jsx:32)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (MaterialUIHogeDescriptionMultiLine.js:16)
    at Module../src/component/MaterialUIHogePriceLine.js (MaterialUIHogePriceLine.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (HogeDetailCard.jsx:34)
    at Module../src/component/HogeEditCard.jsx (HogeEditCard.jsx:40)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (HogeDetail.jsx:30)
    at Module../src/containers/HogeEdit.jsx (HogeEdit.jsx:40)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (App.css?dde5:82)
    at Module../src/App.js (App.js:95)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (index.css?bb0a:82)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (index.js:12)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Hoge.jsx

import React, {Fragment, useEffect, useReducer,createContext} from "react";
import styled from "styled-components";
import {HogeCreateCard} from "../component/HogeCreateCard";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import {SaveButton} from "../component/MaterialUISaveButton";
import {COLORS} from "../style_constants";
import { initializeState,
        hogeCreateActionTypes,
        hogeCreateReducer } from "../reducer/hogeCreateReducer";

const HogeCreateWrappwer = styled.div`
`;

const HogereateHeader = styled.h1`
    margin-top:3%;
    margin-bottom:3%;
`;


export const HogeCreateState = createContext("");
export const HogeCreateDispatch = createContent("");

export const HogeCreate = () => {
    const[state,dispatch] = useReducer(hogeCreateReducer,initializeState);
   
    useEffect(() => {
        console.log();
    },[]);

    function submitHandle() {
        console.log("test");
    }

    return(
        <Fragment>
            <HogeCreateWrappwer>
                <HogeCreateHeader>
                </HogeCreateHeader>
                <HogeCreateDispatch.Provider value={dispatch}>
                    <HogeCreateState.Provider value={state}>
                        <HogeCreateCard/>
                    </HogeCreateState.Provider>
                </HogeCreateDispatch.Provider>
                <ThemeProvider theme={saveButtonTheme}>
                    <SaveButton onClick={submitHandle} />
                </ThemeProvider>
            </HogeCreateWrappwer>
        </Fragment>
    )
}

同時に下記エラーも表示されていました。

src\containers\HogeCreate.jsx
  Line 29:35:  'createContent' is not defined  no-undef

Search for the keywords to learn more about each error.

解決策

contextと書いたつもりが、contentと書いていました。

念のため、該当の個所を記載します。

Hoge.jsx

# 2つ目の個所がcontentになっている
export const HogeCreateState = createContext("");
export const HogeCreateDispatch = createContent("");

参考