UseContext with React Router

Question

Shortly, when I try to use useState with useContext in one of my components, all pages just disappear. UseState in some reason block my Routers and I have no idea why... Can you tell me where is my mistake?

Some code below: Index.js

export default function App() {
  const [value, setValue] = useState(false)       -----> here I set the state
  return (
    <BrowserRouter>
      <UserContext.Provider value={{ value, setValue }}>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<Home />} />
            <Route path='Home' element={<Home />} />
            <Route path='Menu' element={<Menu />} />
            <Route path='Story' element={<Story />} />
            <Route path='Coffee' element={<Coffee />} />
            <Route path='Cart' element={<Cart />} />
          </Route>
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  )
}

// ReactDOM.render(<App />, document.getElementById("root"))
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

Buy.js component

import { useState } from "react"
import { useContext } from "react"
import { UserContext } from "../../UserContext"

const Buy = () => {
  const [buttonText, setButtonText] = useState("Add to cart")
  const [isActive, setIsActive] = useState(false)
  // const [value, setValue] = useContext(UserContext)   --> after I declare state everything disappears
  const addToCart = () => {
    setIsActive((current) => !current)
    // setValue(true)
    if (isActive) {
      setButtonText("Add to cart")
    }
  }
  return (
    <div>
      <button
        class='buy'
        style={{
          fontSize: isActive ? "0.8rem" : "1rem",
          color: isActive ? "lightgray" : "white",
        }}
        onClick={() => {
          addToCart()
        }}
      >
        {buttonText}
      </button>
    </div>
  )
}

export default Buy

UserContext.js

import { createContext } from "react"

export const UserContext = createContext(null)

Actually, I need this Context only for routes "Coffee" and "Cart", but if I wrap only this 2 routes will be the same problem and all is disappear. Should I maybe use Context in my Layout.jsx instead of Index.js? Thank you.

const Layout = () => {
  return (
    <>
      <Navbar />
      <Outlet />
      <Footer/>
    </>
  );
};

export default Layout;

The errors in console:

Try to wrap your BrowserRoute with context provider? Lift it up — Artem Fedotov
– Artem Fedotov, Commented Oct 23, 2022 at 18:29

Arkellys · Accepted Answer · 2022-10-24 04:50:02Z

6

Your context provides an object, not an array, so you should destructure using curly braces when you use it:

const { value, setValue } = useContext(UserContext);

Or if you want to keep this way of destructuring, you can provide an array instead:

<UserContext.Provider value={[value, setValue]}>

edited Oct 24, 2022 at 4:50

answered Oct 23, 2022 at 18:42

Arkellys

8,0384 gold badges23 silver badges49 bronze badges

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

Comments

Chùnky · Accepted Answer · 2022-10-23 18:53:16Z

There are a few issues I see with the React code that I myself struggled with while learning React.

Issue #1

Your button in Buy.js has a class='buy' property. Rename that to className='buy' because that's just React's syntax.

Issue #2

Your button's onClick={} property should reference only the function's name, and should not call the function itself. Change the onClick to onClick={addToCart}. Do not add the anonymous arrow function, simply input the name of the function.

Possible Issue #3

Most of the conditional functionality you are looking for can be implemented with React's useEffect() hook. Change addToCart() in the following way:

const addToCart = () => {
setIsActive();
}

useEffect(() => {
  if(isActive) {
    setButtonText("Add to cart");
  }
}, [isActive]);

Make sure to import useEffect() before using this.

doguyilmaz · Accepted Answer · 2022-10-23 18:44:07Z

2

First i cannot see your Buy.js component between Context.Provider tree.

Then please try to use as object to destruct state values, not array.

answered Oct 23, 2022 at 18:44

doguyilmaz

6157 silver badges12 bronze badges

2 Comments

M. Khromov Over a year ago

Its because Buy.js is a part of Coffe.js. But yes, all problem was with the array instead of object.. Thank you!

doguyilmaz Over a year ago

Just wanted to remind if that was the case. Glad it worked!

Collectives™ on Stack Overflow

UseContext with React Router

3 Answers 3

Comments

Issue #1

Issue #2

Possible Issue #3

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Issue #1

Issue #2

Possible Issue #3

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related