Toggling Between State Value - Toggle Function

Question

In my React App, I have a functional component and wanted to toggle between a state's value. My toggleNav function doesn't seem to working. I'm trying to set isMenuOpen to what isMenuOpen is not but my syntax seems to be incorrect.

I have the following code:

const navBar = () => {

  //set initial state
  const [isMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    isMenuOpen = !isMenuOpen;
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

Answer 1

The second element returned by useState is a setter . You can't just mutate the state. Try this:

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    setMenuOpen(!isMenuOpen)
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

As pointed out in comments, toggleNav is unecessary:

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);


  return (
    <button onClick={() => setMenuOpen(!isMenuOpen)}>Toggle</button>
  )

}