minecluster/src/components/server-options/ExtraPortsOption.jsx

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Chip from "@mui/material/Chip";

const validatePort = (p) => p !== "25565" && p !== "25575" && p.length < 6;

export default function ExtraPortsOption(props) {
  const { extraPorts: initExtraPorts } = props;
  const [extraPorts, setExtraPorts] = useState(initExtraPorts ?? []);
  const { onChange } = props;

  function portChange(e, val, optionType, changedValue) {
    if (optionType === "clear") {
      setExtraPorts([]);
      onChange("extraPorts", []);
      return;
    }
    if (!validatePort(changedValue.option))
      return alert("That port cannot be added/removed as an extra port!");
    setExtraPorts(val);
    onChange("extraPorts", val);
  }

  return (
    <Autocomplete
      multiple
      id="extra-ports-autocomplete"
      options={[]}
      value={extraPorts}
      onChange={portChange}
      freeSolo
      renderInput={(p) => <TextField {...p} label="Extra Ports" />}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => {
          const defaultChipProps = getTagProps({ index });
          return <Chip label={option} {...defaultChipProps} />;
        })
      }
    />
  );
}