I am using react-select with multi select option enabled. I want to add element after selecting option from the given list. Also if clicked on "x" (cross, which es with selected option in input list) I want to delete that element from the selected input list. I am able to add element in the list using onChnage event, however, not sure how can I remove it. I thought react-select ponent should have some callback method to remove the element from the selected-list but I am not able to find it on github as well. The link that they have provided for multiselect is as below and I want something exactly like this: / (Check multi-select in this). I am attaching my html code snippet here:

createNewDeliveryData: {
                user_id: localStorage.getItem('userId'),
                //auth_token: localStorage.getItem('token'),
                is_listed: false,
                is_published: false,
                id:'',
                tags: [],
                languages: [],
                markets:[],
                order: 1,

            },
market = {
    default_name: "Deutschland"
    icon: "de"
    id:"44fc0d0c-d0ed-4013-924a-e15f4d589c83"
}

<If condition={!this.props.getDeliveryReqState}>
    <Select
    multi={true}
    name="form-field-name"
    options={this.props.metadata ? this.props.metadata["latest"].markets : []}
    labelKey="default_name"
    valueKey="id"
    onChange={this.addMarket}
    clearable={false}
    value={this.state.createNewDeliveryData.markets}
    />
</If>

addMarket = (value) => {    
    console.log("markets type",typeof(value))
    this.setState({
        createNewDeliveryData : {
            ...this.state.createNewDeliveryData,
            markets: value
        },
    },function () {
        this.setValue({id:"markets", value:this.state.createNewDeliveryData.markets, error:null})
    });
  }

Can someone help me in this. It will be better if I can use react in-buil callback method instead of manually handling remove logic.

Thanks in advance.

I am using react-select with multi select option enabled. I want to add element after selecting option from the given list. Also if clicked on "x" (cross, which es with selected option in input list) I want to delete that element from the selected input list. I am able to add element in the list using onChnage event, however, not sure how can I remove it. I thought react-select ponent should have some callback method to remove the element from the selected-list but I am not able to find it on github as well. The link that they have provided for multiselect is as below and I want something exactly like this: https://jedwatson.github.io/react-select/ (Check multi-select in this). I am attaching my html code snippet here:

createNewDeliveryData: {
                user_id: localStorage.getItem('userId'),
                //auth_token: localStorage.getItem('token'),
                is_listed: false,
                is_published: false,
                id:'',
                tags: [],
                languages: [],
                markets:[],
                order: 1,

            },
market = {
    default_name: "Deutschland"
    icon: "de"
    id:"44fc0d0c-d0ed-4013-924a-e15f4d589c83"
}

<If condition={!this.props.getDeliveryReqState}>
    <Select
    multi={true}
    name="form-field-name"
    options={this.props.metadata ? this.props.metadata["latest"].markets : []}
    labelKey="default_name"
    valueKey="id"
    onChange={this.addMarket}
    clearable={false}
    value={this.state.createNewDeliveryData.markets}
    />
</If>

addMarket = (value) => {    
    console.log("markets type",typeof(value))
    this.setState({
        createNewDeliveryData : {
            ...this.state.createNewDeliveryData,
            markets: value
        },
    },function () {
        this.setValue({id:"markets", value:this.state.createNewDeliveryData.markets, error:null})
    });
  }

Can someone help me in this. It will be better if I can use react in-buil callback method instead of manually handling remove logic.

Thanks in advance.

• javascript
• html
• reactjs
• multi-select
• react-select

1 Answer 1

Adding and removing elements BOTH trigger the onChange event with an array of currently selected values as a parameter.

For instance if my onChange handler is, say, chooseAnimal and my options are ["Mouse", "Cat", "Dog", "Duck"], when I select "Cat" then I will trigger chooseAnimal(["Cat"]). If I then select "Mouse", I'll trigger chooseAnimal(["Cat", "Mouse"]). And if I decide to remove "Cat", I'll trigger chooseAnimal(["Mouse"]).

So say I have a simple state with a chosenAnimals array, my chooseAnimal handler would be very simple:

chooseAnimals = (chosenAnimals) => {
  this.setState({ chosenAnimals });
}

In your own code, would the following work?

addMarket(markets) {
  this.setState({ createNewDeliveryData: Object.assign({}, createNewDeliveryData, { markets }) });
  // alternative form:
  // let { createNewDeliveryData } = this.state;
  // createNewDeliveryData.markets = markets;
  // this.setState({ createNewDeliveryData });
}

Considering the structure of your market object, this is how you would set the options in your Select tag:

options={this.props.metadata ? this.props.metadata["latest"].markets.map(m => return {value: m.id, label: m.default_name}) : []}

What map does it that it'll iterate over your markets array and create a new array formed of value & label pairs for each element in the original markets array, and set the value to the id of that market element, and the label to the name of that same market element. Now the onChange handler should receive an array containing only market ids.