TypeError: Object is not a function?

Question

I just started learning React Hooks. I have a file called appContext.js ..Which has the AppContext inside

const AppContext = React.createContext(initialState);

And I want to use it in file checkInfo.js

const CheckInfo = (props) => {

    const [state, dispatch] = useContext(AppContext);

    useEffect(() => {
          var personData = {};

          async function fetchData() {

            dispatch({
              type: "isLoding",
              payload: true,
            });
          }
          ////other code
        }

but i have

TypeError: Object is not a function

Where am I wrong?

Please show a reproducible example: How to create a Minimal, Reproducible Example, how can we guess how your AppContext looks like? — Dennis Vash
– Dennis Vash, Commented Oct 5, 2020 at 13:43
deceze♦ .. const [state, dispatch] = useContext(AppContext); — zahra zamani
– zahra zamani, Commented Oct 5, 2020 at 13:44

Tibebes. M · Accepted Answer · 2020-10-05 13:46:42Z

6

replace the line

const [state, dispatch] = useContext(AppContext);

to

const { state, dispatch }  = useContext(AppContext);

since useContext returns an object with fields state and dispatch - not an array

answered Oct 5, 2020 at 13:46

Tibebes. M

7,6285 gold badges18 silver badges39 bronze badges

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

1 Comment

zahra zamani Over a year ago

i did it but i have TypeError: dispatch is not a function

PDill5446 · Accepted Answer · 2021-05-01 06:55:52Z

sorry to revisit this after such a long period, but I've run into this issue before, and the {state, dispatch} format provided above didn't work for me. I have a solution though! The compiler shows that the error is located in your component, but the root of the problem may actually be that you didn't wrap that component in the Store provider when you go to render it. Here's the code where I ran into this issue.

This is my the relevant part of my component file

title.js:

import React, { useState, useContext, useEffect } from 'react'
import { Context } from './state/store'

export default function TitleSearchForm () {
  const [state, dispatch] = useContext(Context)

To reproduce the error, I had this setup in my app.js file. The store provider isn't wrapping all of the components that need to use the Context state.

app.js:

import React from 'react'
import TitleSearchForm from './components/titleSearch'
import Menu from './components/menu'
import Store from './components/state/store'
import './App.css'

function App () {
  return (
    <div>
      <header>
        <TitleSearchForm />
      </header>
        <main>
      <Store>  // This doesn't wrap TitleSearchForm
          <Menu />
      </Store>
        </main>
    </div>
  )
}

Here's the error message:

TypeError: Object is not a function
TitleSearchForm
src/components/titleSearch.js:7
   4 | import { Context } from './state/store'
   5 | 
   6 | export default function TitleSearchForm () {
>  7 |   const [state, dispatch] = useContext(Context)
   8 |   const [title, setTitle] = useState('')
   9 |   const [id, setId] = useState('')
  10 |   const [year, setYear] = useState('')

To fix it, I simply moved the wrapper so that it wraps every component that will use the state provided by the Context.

app.js (corrected)

  return (
    <div>
      <Store>    // Now Store wraps every component that will use it's state.
        <header>
        <TitleSearchForm />
        </header>
        <main>
            <Menu />
        </main>
      </Store>
    </div>
  )
}

And that's it! I've had this error pop up on me a couple of times now, and both times this was my issue. I hope this helps somebody out there!

Collectives™ on Stack Overflow

TypeError: Object is not a function?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related