React Js Button Toggle/ Styled Components - reactjs

Question

my style
import React from 'react';
import styled from 'styled-components';
export const DivMenuButton = styled.div`
border: 0px;
backgroundColor: #000;
height: 400px;
width: 200px;
`;
my return:
import { DivMenuButton } from './styles';
export default function Menu() {
const [open, setOpen] = useState(0);
const handleClick = e => {
e.preventDefault();
setOpen(!open);
};
return (
<DivMenuButton>
<Button
style={{ margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' }}
onClick={handleClick}
>
Button
</Button>
</DivMenuButton>
);
}
I would also like to know how I could do the following:
I have a state open
my div will start with 400 px
clicking the button will get it 30px
but I don't know how I can do this with styled components

Answer 1

Use styled-components props
Try this:
export const DivMenuButton = styled.div`
border: 0px;
background-color: #000; // was wrong syntax
height: 400px;
width: ${props => props.width}
`;
export default function Menu() {
const [open, setOpen] = useState(false);
const handleClick = e => {
// e.preventDefault(); no need
setOpen(!open);
};
return (
<DivMenuButton width={open ? '30px' : '400px'}>
<button
style={{ margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' }}
onClick={handleClick}
>
Button
</button>
</DivMenuButton>
);
}