common react refactorings... removing duplication with `map`

react-refactorings-map.js

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

refactor.js

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