I have a form I want users to fill out. I have an array of options they can choose from but I don't want any of them to be the default. I would like the drop down to say something like --Select-- . Then when the users selects the dropdown, they can no longer select --Select--.

I am using Redux forms and React-Bootstrap for the presentation. I seen some answers on Stack Overflow, they say set the option to disable or add it as an option group. This resolve how it behaves when the dropdown opens but removes that option as a default option.

  let selectOptions = options.map((option, index) => {
    return (
      <option key={index} value={option}>
        {option}
      </option>
    );
  })
  const {value, ...inputs} = input
  
    return (
    <Aux>
      <Form.Label className="mb-1">{label}</Form.Label>
      {explanation && !readonly ? (
        <OverlayTrigger
          trigger="click"
          key={"right"}
          placement={"right"}
          overlay={
            <Popover id="popover-basic">
              <Popover.Header as="h3">{label}</Popover.Header>
              <Popover.Body>{explanation}</Popover.Body>
            </Popover>
          }
        >
          <i className="material-icons text-info align-top ml-2 cursor">help</i>
        </OverlayTrigger>
      ) : null}
      <Form.Control
        className={`${formStyle} ${validationStyle} ${noValidationStyle}`}
        disabled={readonly}
        as="select"
        placeholder="select"
        {...input}
        isInvalid={(touched || attempt) && !!error}
        isValid={!error}
      >
        {selectOptions}
      </Form.Control>

      {(touched || attempt) && !!error && !readonly ? (
        <Form.Control.Feedback type="invalid" className="animated fadeIn">
          {error}
        </Form.Control.Feedback>
      ) : (
        <span>{"\u00A0"}</span>
      )}
    </Aux>