How to use react-select-table's rows as options to react-select's input field

Question

I have an input field that should accept multiple inputs from options that are already set. - This input field needs to appear like tag input fields so I used the React-select library:

The set options are going to come from a react-bootstrap-table so I disabled the built-in dropdown in the react-select input field.

The problem is that I cannot remove the selected items by deselecting the row from the react-bootstrap-table. I think I am doing something wrong on how I'm passing the values between the input field and the table but can't figure it out.

Here is the codesandbox

Answer 1

The problem is you try to compare two Objects, however there is no generic means to determine that an object is equal to another. You could JSON.stringify them both and compare but thats not reliable way.

Instead, you can filter the array by object key, lets say label. In this case, your function should look like this:

const setSelected = (row: any, isSelect: any, rowIndex: any, e: any) => {
    if (isSelect) {
        setSelectProducts([...selectedProducts, row]);
    } else {
        const newArray = selectedProducts.filter(
            (item) => item.label !== row.label
        );
        setSelectProducts(newArray);
    }
};

Here is codesandbox to preview

@Edit

If you wanna do something onClear

onChange={(selectedOption, triggeredAction) => {
  if (triggeredAction.action === 'clear') {
    // Clear happened
  }