I need a Collapse example. please show me a simple material-UI Collapse.
<Button color="primary" startIcon={<LocalGroceryStoreOutlined />}> Credit charge</Button>
<Collapse >test</Collapse>
const { useState } = React;
const {
Button,
Collapse,
colors,
CssBaseline,
ThemeProvider,
Typography,
Container,
createTheme,
Box,
SvgIcon,
Link,
} = MaterialUI;
const Credit = (props) => {
const {id} = props;
const [open, setOpen] = useState(false);
return (
<div className="my-4">
<div>
<Button color="primary"
onClick={() => setOpen(state => !open)}> click me</Button>
</div>
<div>
<Collapse in={open}>test</Collapse>
</div>
</div>
);
};
ReactDOM.render(<Credit />, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossOrigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossOrigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</body>