Passing a state with context in react

Question

I'm learning react and using context for the first time. I'm trying to pass a state and setState function through context to all children components, and I keep getting an error.

This is how I'm creating the context:

import {createContext} from 'react'

const Context = createContext({
    wishlist: [],
    setObject: () => {}
  });
  
export default Context

This is where I create the useState hook and pass the context on to children components:

const [wishList, setwishList] = useState ([])


  return (
    <div className={darkMode === false ? 'lightMode' : 'darkMode'}>

    <Router>

      <Context.Provider value={{wishList, setwishList}} >

        <Header setDarkMode={setDarkMode} darkMode={darkMode} wishListcounter={wishListcounter} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
        <Switch>
          <Route path='/' exact>
            <Hero darkMode={darkMode} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>

          <Route path='/gallery'>
            <Gallery darkMode={darkMode} productsDataBase={productsDataBase} productsArray={productsArray} setProductsArray={setProductsArray} wishListcounter={wishListcounter} setwishListcounter={setwishListcounter}/>
          </Route>

          <Route path='/item'>
            <Item  />
          </Route>

          <Route path='/wishlist'>
            <Wishlist wishListcounter={wishListcounter} />
          </Route>

          <Route path='/about'>
            <About productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>
        </Switch>
        <Footer />

      </Context.Provider>

    </Router>
</div>

); }

And this is where I consume the context, read the state and modify it.

    // Hook used to access wishlist and modify it
const {wishList, setwishList} = useContext(Context)

function handleWishClick (id) {
   
    wishList.includes(id) ? wishList.splice(wishList.indexOf(id), 1) : setwishList(wishList.push(id))
    
    console.log(wishList)
}

The error I'm getting is TypeError: wishList.includes is not a function. And this only happens once the state has been modified once.

I mean, the handleWishClick function runs well once, but when I try to run it again then the state doesn't get recognized.

Any tips on how to solve this?

Full code can by found here: https://github.com/coccagerman/sweetKicks

Thanks in advance!

I don't think it's necessary to use setState here. You can provide a simple JSON object, to the Context Provider, with all the necessary properties. Also, github link gives 404 error. Try to produce a working example [here](https://codesandbox.io/dashboard/home?workspace=6e40603e-c304-4744-b76d-12456eaaa21d) — Charchit Kapoor, May 09 '21 at 15:11

score 2 · Answer 1 · answered May 09 '21 at 15:19

The push method doesn't return a new list. Docs for list push

You are actually setting the empty list to a number when you do setwishList(wishList.push(id)) as the push method returns the length of the list which you are then setting to the state.

So when you try to push it the next time, it fails with the error mentioned.

Instead you can do setwishList([...wishList, id])

Passing a state with context in react

1 Answers1