Skip to content

Instantly share code, notes, and snippets.

@steveoh
Last active June 5, 2019 22:21
Show Gist options
  • Save steveoh/190d3f68bf0cabab05a86f5339c427db to your computer and use it in GitHub Desktop.
Save steveoh/190d3f68bf0cabab05a86f5339c427db to your computer and use it in GitHub Desktop.
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