title: react-select createable option - adding group label
body: <p>I've created this cool sandbox that utilises <a href="https://react-select.com/home#creatable" rel="nofollow noreferrer">react-select</a> and the creatable feature. It allows you to select from a prepopulated dropdown and at the same time create a custom option by typing into the select field. Once you have typed into the field your option becomes available in the select list. </p>
  
  <p>I have added in options to be grouped - pre-existing fields are fine, but new options I would like to be grouped by a default value e.g. "new group".</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><a href="https://codesandbox.io/s/p5x7m478rm" rel="nofollow noreferrer">https://codesandbox.io/s/p5x7m478rm</a></p>
  
  <pre><code>import React from "react";
  import { Field, reduxForm, FieldArray } from "redux-form";
  import TextField from "material-ui/TextField";
  import { RadioButton, RadioButtonGroup } from "material-ui/RadioButton";
  import Checkbox from "material-ui/Checkbox";
  import SelectField from "material-ui/SelectField";
  import MenuItem from "material-ui/MenuItem";
  import asyncValidate from "./asyncValidate";
  import validate from "./validate";
  import CreatableSelect from "react-select/lib/Creatable";
  const CustomStyle = {
    option: (base, state) =&gt; ({
      ...base,
      display: "inline",
      marginRight: "10px",
      backgroundColor: state.isSelected ? "#00285C" : "#eee",
      cursor: "pointer"
    }),
    menuList: () =&gt; ({
      padding: 10,
      display: "inline-flex"
    }),
    menu: () =&gt; ({
      position: "relative"
    })
  };
  
  const createOption = (label: string) =&gt; ({
    label,
    value: label.toLowerCase().replace(/\W/g, "")
  });
  
  const formatGroupLabel = data =&gt; (
    &lt;div&gt;
      &lt;span&gt;{data.label}&lt;/span&gt;
    &lt;/div&gt;
  );
  
  class LastNameSelectInput extends React.Component {
    constructor(props) {
      super(props);
    }
  
    state = {
      value: this.props.options[0].options,
      options: this.props.options
    };
    handleCreate = input =&gt; (inputValue: any) =&gt; {
      this.setState({ isLoading: true });
      setTimeout(() =&gt; {
        const { options, value } = this.state;
        const newOption = createOption(inputValue);
        this.setState({
          isLoading: false,
          options: [...options, newOption],
          value: newOption,
          formatGroupLabel: "new label"
        });
        input.onChange(newOption);
      }, 1000);
    };
  
    isValidNewOption = (inputValue, selectValue, selectOptions) =&gt; {
      if (
        inputValue.trim().length === 0 ||
        selectOptions.find(option =&gt; option.name === inputValue)
      ) {
        return false;
      }
      return true;
    };
  
    render() {
      const { input, options } = this.props;
      return (
        &lt;div&gt;
          &lt;style&gt;
            {`.react-select__dropdown-indicator,.react-select__indicator-separator {
            display: none;
          }`}
          &lt;/style&gt;
          &lt;CreatableSelect
            classNamePrefix="react-select"
            options={this.state.options}
            menuIsOpen={true}
            onChange={value =&gt; {
              let newValue = input.onChange(value);
              this.setState({ value: newValue });
            }}
            onBlur={() =&gt; input.onBlur(input.value)}
            onCreateOption={this.handleCreate(input)}
            value={this.state.value}
            styles={CustomStyle}
            isClearable
            isValidNewOption={this.isValidNewOption}
            formatGroupLabel={formatGroupLabel}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const MaterialUiForm = props =&gt; {
    const { handleSubmit, options, pristine, reset, submitting } = props;
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;div&gt;
          &lt;Field name="option" component={LastNameSelectInput} {...props} /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  };
  
  export default reduxForm({
    form: "MaterialUiForm", // a unique identifier for this form
    validate,
    asyncValidate
  })(MaterialUiForm);
  </code></pre>