Unexpected keyword 'true' while using `useState` in react?

Question

Here i am trying to set the open prop of the MUIDrawer to true when the user clicks it but while setting the state i am getting an error "Unexpected keyword 'true' "

import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import {
  Drawer as MUIDrawer,
  ListItem,
  List,
  ListItemIcon,
  ListItemText,
  AppBar,
  Toolbar,
  IconButton
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";

const useStyles = makeStyles({
  drawer: {
    width: "190px"
  }
});

const Drawer = props => {
  const { history } = props;
  const classes = useStyles();
  const itemsList = [
    {
      text: "Home",
      icon: <InboxIcon />,
      onClick: () => history.push("/")
    },
    {
      text: "About",
      icon: <MailIcon />,
      onClick: () => history.push("/about")
    },
    {
      text: "Contact",
      icon: <MailIcon />,
      onClick: () => history.push("/contact")
    }
  ];

  

  [state, setState] = useState(false);
  
  const toggleDrawer = {setState(true)}

  return (
    <>
      <AppBar>
        <Toolbar>
          <IconButton
            style={{ position: "absolute", right: "0" }}
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <MUIDrawer
        className={classes.drawer}
        open={state}
      >
        <List>
          {itemsList.map((item, index) => {
            const { text, icon, onClick } = item;
            return (
              <ListItem button key={text} onClick={onClick}>
                {icon && <ListItemIcon>{icon}</ListItemIcon>}
                <ListItemText primary={text} />
              </ListItem>
            );
          })}
        </List>
      </MUIDrawer>
    </>
  );
};

export default withRouter(Drawer);

Answer 1

The errors are in:

  [state, setState] = useState(false);
  
  const toggleDrawer = {setState(true)}

First you forgot the const keyword in the useState hook.

  const [state, setState] = useState(false);

And the toggleDrawer must be a function you can do that like the following:

const toggleDrawer = () => {setState(true)}

or

function toggleDrawer(){
   setState(true)
}

If you want, you can make the function inside the onClick:

<IconButton
   style={{ position: "absolute", right: "0" }}
   onClick={()=>{setState(true)}}
>

And finally if you want to make it false when you click it again:

<IconButton
   style={{ position: "absolute", right: "0" }}
   onClick={()=>{setState(!state)}}
>

In this last case setState(!state) will allow you to save the opposite of state.

Then, for each click you make, the state value will change to the opposite of the previous value.

Answer 2

Try declaring toggleDrawer as a function, like this:

const toggleDrawer = () => setState(true)