React/Material-UIでdrawer

4534 ワード
React material-ui React テキストリンク
MyDrawer.js
import React, { useState } from "react";
import { Button, Drawer, List, ListItem } from "@material-ui/core";

const MyDrawer = () => {
  const [state, setstate] = useState(false);
  const flag = () => {
    setstate(!state);
    console.log(state);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={flag}>
        Open Drawer
      </Button>
      <Drawer open={state} onClose={flag}>
        <List>
          <ListItem>AAA</ListItem>
          <ListItem>BBB</ListItem>
          <ListItem>CCC</ListItem>
        </List>
      </Drawer>
    </div>
  );
};

export default MyDrawer;