I have that code using React and I have that select, I would like in the case where I got empty labels and values I don't want that items. How is it possible ?

Here is my code :

import React, { Component } from "react";
import Select from "react-select";
import { useState } from "react";

let cheeses = [
  "Wagasi",
  "Kalari",
  "Halloumi",
  "Manouri"
];

let options = [];
options = options.concat(cheeses.map((x) => "Cheese - "   x));

const Foo = () => {
  const [value, setValue] = useState("");

  function MakeOption(x) {
    if(value){
    return { value: x, label: x };
    }
    else{
      return {value: "", label: ""};
    }
  }


  const handleInputChange = (value, e) => {
    if (e.action === "input-change") {
      setValue(value);
    }
  };

  return (
    <Select
      isMulti
      name="colors"
      options={options.map((x) => MakeOption(x))}
      className="basic-multi-select"
      classNamePrefix="select"
      closeMenuOnSelect={false}
      onInputChange={handleInputChange}
      inputValue={value}
      noOptionsMessage={() => null}
    />
  );
};

export default Foo;

At that moment I got that :

Could you help me please ?

CodePudding user response：

You could just filter your array after the map :

options={options.map((x) => MakeOption(x)).filter(opt => opt.value !== "")}