Handling .map and if/else statement for react render - using React-select

Question

I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears.

This is the incorrect code that results in that behavior...

  if (this.state.hasCreatedOption) {
    options[this.state.hasCreatedOption] = newOption;
  } else {
    options.map(option => {
      if (option.label === "New group") {
        return {
          label: option.label,
          options: option.options.push(newOption)
        };
      }
      return option;
    });
  }

  hasCreatedOption = options.length - 1;

Here is the example created - https://codesandbox.io/s/w761j8v855

Laura Laura · Accepted Answer · 2018-11-12T15:38:17

As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:

state = {
    value: this.props.options[0].options,
    options: this.props.options,
    hasCreatedOption: this.props.options.length - 1
  };
  handleCreate = input => (inputValue: any) => {
    this.setState({ isLoading: true });

    setTimeout(() => {
      const { options } = this.state;
      const newOption = createOption(inputValue);
      options[this.state.hasCreatedOption].options[0] = newOption;

      this.setState({
        isLoading: false,
        options: [...options],
        value: newOption,
        formatGroupLabel: "new label"
      });
      input.onChange(newOption);
    }, 1000);
  };

As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.

Handling .map and if/else statement for react render - using React-select

2 Answers