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);

You also forgot the ```const``` keyword when you declare your useState hook. ```const [state, setState] = useState(false)``` — Lenni, Jul 14 '20 at 20:13

Martin Gainza Koulaksezian · Answer 1 · 2020-07-14T20:35:06.770

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.

score 1 · Answer 2 · answered Jul 14 '20 at 20:13

1

Try declaring toggleDrawer as a function, like this:

const toggleDrawer = () => setState(true)

answered Jul 14 '20 at 20:13

Charlie Stanard

909
2
9
19

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

2 Answers2