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