CODEWITHSUNDEEP
javascriptreactjsreact-hooks
zahra zamani
zahra zamani

Reputation: 1375

TypeError: Object is not a function?

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?

Upvotes: 5

Views: 9656

Answers (2)

PDill5446
PDill5446

Reputation: 113

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!

Upvotes: 3

Tibebes. M
Tibebes. M

Reputation: 7548

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

Upvotes: 6

Related Questions