React Js Button Toggle/ Styled Components

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

there he went on to active = prop active can i create any name? how open and prop open? — user12465675
– user12465675, Commented Dec 27, 2019 at 17:33

awran5 · Accepted Answer · 2019-12-27 18:27:36Z

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

answered Dec 27, 2019 at 18:27

awran5

4,5962 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user12465675 Over a year ago

Hello this way when I click my button the div would continue with the same prop and would not change. example she starts with 400 height i clicking a button she would go to 40px

awran5 Over a year ago

Sorry i didn't understand would you explain more? The main question was about changing the div width not height?

Collectives™ on Stack Overflow

React Js Button Toggle/ Styled Components

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related