React useContext: State is displaying undefined

Deniel Salvacion 0
Viewed 30

I'm passing the value of my state using useContext. However it keeps on saying that "toggle" is undefined how do i solved this part that the value of toggle can be passed to mainSection?

Here's my code

    import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';


 

const languages = ['JavaScript', 'Python'];
export const reactContext = React.createContext()
function App() {
  const [toggle,setToggle] = useState(false)
  // implement Context here so can be used in child components
  return (
    <reactContext.Provider value={{toggle,setToggle}}>
      <MainSection />
    </reactContext.Provider >
  );
}

function MainSection() {
  console.log(toggle)
  return (
    <div>
      <p id="favoriteLanguage">Favorite programing language: {languages[0]}</p>
      <button id="changeFavorite" onClick={() => console.log(toggle)}>Toggle language</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
react-context reactjs javascript
1 Answers

you are missing useContext. At the same time you should likely use ReactContext instead of reactContext.

function MainSection() {
const { toggle, setToggle } = useContext(reactContext) // <-- you are missing this line
  console.log(toggle)
  return (
    <div>
      <p id="favoriteLanguage">Favorite programing language: {languages[0]}</p>
      <button id="changeFavorite" onClick={() => console.log(toggle)}>Toggle language</button>
    </div>
  )
}

Docs - https://reactjs.org/docs/hooks-reference.html#usecontext

Someone Special0
Related