React Multiselect checkbox filtering data

Question

I have an application retrieving a list of todos from this endpoint

I have built a CheckBoxDropDown component to select the id of each todo

In the CheckBoxDropDown.js component i am passing as prop the function onChange

const handleChange = (event) => {
    const value = event.target.value;
    setSelected(value);
    onChange(value);
};

<Select
    labelId="mutiple-select-label"
    multiple
    value={selected}
    onChange={handleChange}
    renderValue={(selected) => selected.join(", ")}
    MenuProps={MenuProps}
>

In App.js i am passing the data ( tasks ) to my component, everything works fine.

<CheckBoxDropDown onChange={handleFilterTasks} tasks={tasks} />

How can i filter in my handleFilterTasks method the task or tasks id for any id i select in the dropdown ?

This is what i am trying to do but i can not get my result array with the filter data por id selected

  const handleFilterTasks = (item, e) => {
    const task = e
    const userId = tasks[e]
    const result = tasks.filter(val => val.id !== userId);
    console.log(result);
    // setFilteredData(task);
  }

You can see the demo here

Answer 1

This can be done with filtering your values array. You have the array which renders the list and you have the selected value. Consider below example. This will return an array with selected UserId (here, 4). After the array is filtered, you can call setSelected(filteredArray) to update the table. Let me know if this works! Please mark it as answer if it works!

const valuesList = [{id: 1, name:'spray'}, {id:2, name:'limit'}, {id:3, name:'elite'}, {id:4, name:'exuberant'}];
const userId = 4

const result = valuesList.filter(val => val.id == userId);

console.log(result);