React.js: How to convert class based component to functional?

Question

I'm building an app using function based component . I found the sidebar menu template from Material Ui in classes and want to convert it to functional component . But after converting click button doesn't work. I've only changed the menu icon to another. Any help will be appreciated.
Here is the default component in classes

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { NavDrawer } from "./NavDrawer";

class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerOpened: false
    };
  }
  toggleDrawer = booleanValue => () => {
    this.setState({
      drawerOpened: booleanValue
    });
  };

  render() {
    return (
      <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton
              color="secondary"
              aria-label="Menu"
              onClick={this.toggleDrawer(true)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit">
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>

        <NavDrawer
          drawerOpened={this.state.drawerOpened}
          toggleDrawer={this.toggleDrawer}
        />
      </div>
    );
  }
}

export default NavBar

Here I'm trying to convert

import React, { useState } from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton'
import NavDrawer from './NavDrawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'

function NavBar(props) {
  const [drawerOpened, setDrawerOpened] = useState(false)

  const toggleDrawer = booleanValue => () => {
    setDrawerOpened(booleanValue)
  }

  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton
            aria-label="AddShoppingCartIcon"
            onClick={() => toggleDrawer(true)}
          >
            <AddShoppingCartIcon style={{ fontSize: 30 }} color="secondary" />
          </IconButton>
          <Typography variant="h6" color="inherit"></Typography>
        </Toolbar>
      </AppBar>

      <NavDrawer drawerOpened={drawerOpened} toggleDrawer={toggleDrawer} />
    </div>
  )
}

export default NavBar

Answer 1

You can do this instead for toggling actions.

const toggleDrawer = () => {
    setDrawerOpened(!drawerOpened)
}

And in the return

onClick={toggleDrawer}

Your function is stacking. On onclick, you try to call function to call function. Just use the const instead.

on toggleDrawer const, you should set setDrawerOpened to whenever the opposite of value it is to get toggling effect.

Answer 2

Have a look at React hooks, there ae two approaches:

const [toggleDrawer, setToggleDrawer] = useState(false);   // set variable
  <button onClick={() => setToggleDrawer(!toggleDrawer}>

Of you can useEffect to perform some logic after the component is initially rendered, preventing a max error:

const toggleDrawer = false;

          useEffect(() => {   // update variable
            checkDrawOpened(toggleDrawer)
          }, toggleDrawer);]

With the one click

onClick={toggleDrawer}  // use variable