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

Rajan Mishra · Accepted Answer · 2021-07-06 17:01:54Z

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);

answered Jul 6, 2021 at 17:01

Rajan Mishra

431 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koala7 Over a year ago

I accept as answer the code related to the codesandbox that i link in the question, thanks.

Collectives™ on Stack Overflow

React Multiselect checkbox filtering data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related