node-factorio-recipes/components/home/Preferences/Preferences.tsx

import { FC, useState } from 'react'
import { FactorySelect } from '../FactorySelect/FactorySelect'
import { useGroups } from '../../contexts/GroupProvider'

export const Preferences: FC = () => {
  const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
    useGroups()
  const [newGroupValue, setNewGroupValue] = useState('New group')
  return (
    <>
      <fieldset>
        <legend>Basic Values</legend>
        <FactorySelect
          id={'baseFactoriesSelect'}
          factories={baseFactories}
          onSetFactories={setBaseFactories}
        />
      </fieldset>
      <fieldset>
        <legend>Ignored Values</legend>
        <FactorySelect
          id={'ignoredFactoriesSelect'}
          factories={ignoredFactories}
          onSetFactories={setIgnoredFactories}
        />
      </fieldset>
      <fieldset>
        <legend>Add new groups</legend>
        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
        <button
          disabled={!newGroupValue}
          onClick={() => {
            addGroup(newGroupValue)
            setNewGroupValue('New group')
          }}
        >
          Add group &quot;{newGroupValue}&quot;
        </button>
      </fieldset>
    </>
  )
}