common react refactorings... removing duplication with `map`
export default () => { | |
const [active, setActive] = useState('agent'); | |
return ( | |
<div fluid className="filter-selector"> | |
<ButtonGroup> | |
<Button color={active === 'agent' ? 'warning' : 'secondary'} onClick={() => setActive('agent')}>Agent</Button> | |
<Button color={active === 'offender' ? 'warning' : 'secondary'} onClick={() => setActive('offender')}>Offender</Button> | |
<Button color={active === 'location' ? 'warning' : 'secondary'} onClick={() => setActive('location')}>Location</Button> | |
<Button color={active === 'date' ? 'warning' : 'secondary'} onClick={() => setActive('date')}>Date</Button> | |
<Button color={active === 'behavior' ? 'warning' : 'secondary'} onClick={() => setActive('behavior')}>Behavior</Button> | |
<Button color={active === 'other' ? 'warning' : 'secondary'} onClick={() => setActive('other')}>Other</Button> | |
</ButtonGroup> | |
</div> | |
) | |
} |
export default () => { | |
const [active, setActive] = useState('Agent'); | |
const buttons = ['Agent', 'Offender', 'Location', 'Behavior', 'Date', 'Other']; | |
return ( | |
<div fluid className="filter-selector"> | |
<ButtonGroup> | |
{buttons.map((name, index) => { | |
return <Button key={index} color={active === name ? 'warning' : 'secondary'} onClick={() => setActive(name)}>{name}</Button> | |
})} | |
</ButtonGroup> | |
</div> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment