Toggle Button React Button Examples | React.school
Mon May 16 2022 09:51:09 GMT+0000 (Coordinated Universal Time)
Saved by
@Jude∗
#javascript
import React, { useState } from 'react';
import styled from 'styled-components';
const Button = styled.button`
/* Same as above */
`;
const ButtonToggle = styled(Button)`
opacity: 0.6;
${({ active }) =>
active &&
`
opacity: 1;
`}
`;
const ButtonGroup = styled.div`
display: flex;
`;
const types = ['Cash', 'Credit Card', 'Bitcoin'];
function ToggleGroup() {
const [active, setActive] = useState(types[0]);
return (
<ButtonGroup>
{types.map(type => (
<ButtonToggle
key={type}
active={active === type}
onClick={() => setActive(type)}
>
{type}
</ButtonToggle>
))}
</ButtonGroup>
);
}
content_copyCOPY
https://react.school/ui/button
Comments