how to 'inject' confirm event into react-select? - reactjs

Question

I am using this project https://github.com/JedWatson/react-select for select component. I use it to render a multi select component. Below is a sample code:
import Async from 'react-select/lib/Async';
<Async
className="user-select"
classNamePrefix="user-select"
defaultValue={this.state.defaultValue}
defaultOptions
isClearable={false}
loadOptions={this.loadOptions}
isMulti
/>
below is a screenshot. It renders two items Purple and Red.
The item will be removed when I click the close button after each item. How can I add a prompt model to ask user confirm before deleting?

Answer 1

on clicking the item send that particular id to the event handler function and set that value and id in the state and also do setState for modal to true to show the model when item is clicked
You also make sure to set the showModal to false when user clicks yes or no in the modal so that it will work next time when you want to delete other item.
constructor(props){
super(props);
this.state = {
itemId: 0,
showModal: false,
itemValue: ""
}
}
handleItem = event => {
this.setState({
itemId: event.target.id,
showModal: true,
itemValue: event.target.value
});
}
resetModalFlag = () => {
this.setState({
showModal: false
})
}
render(){
const { showModal, itemId, itemValue } = this.state;
return(
<div>
<Select onChange={this.handleItem} />
{showModal && <Modal id={itemId} itemValue={itemValue} resetModalFlag={this.resetModalFlag} />}
</div>
)
}
In Modal component access itemId and itemValue using this.props and you can show text like are you sure you want delete this.props.itemValue With yes or no button. When either one of these buttons clicked you need to call resetModalFlag in yes and no button event handler functions like
handleYesButton= () =>{
this.props.resetModalFlag();
}
handleNoButton= () =>{
this.props.resetModalFlag();
}