Как осуществлять фильтрацию по нескольким свойствам?

Question

[aliaksandr-go]

Имеется массив:


Пытаюсь сделать, чтобы через чекбоксы можно было выбирать и Languages и Level:


Обновление массива выбранных значений и фильтрация:

const [selectedOptions, setSelectedOptions] = useState([]);

    const handleCheckboxChange = (e) => {
        const value = e.target.value;

        setSelectedOptions((prevSelected) => {
            if (prevSelected.includes(value)) {
                return prevSelected.filter((option) => option !== value);
            } else {
                return [...prevSelected, value];
            }
        });
    };

    const filteredData = sitterStore.filter((item) => {
        if (selectedOptions.length === 0) {
            return true;
        } else {
            return selectedOptions.includes(item.level_name);
        }
    });

Создание чекбоксов:

{sitterStore.map((item, index) =>
                    <>
                        <label className='checkbox-label'>
                            <input
                                type="checkbox"
                                value={item.lang_name}
                                checked={selectedOptions.includes('lang_name')}
                                data-key={`lang_name`}
                                onChange={(e) => handleCheckboxChange(e)}
                                className='checkbox-input'/>
                            {item.lang_name}
                        </label>
                    </>
                )}

Вот тут:

return selectedOptions.includes(item.level_name);

если проверяю одно свойство, level или language, всё ок, а если два сразу, что делать?

Answer 1

[Алексей Ярков]

return selectedOptions.includes(item.level_name)
  && selectedOptions.includes(item.lang_name);

Answer 2

[0xD34F]

Вместо общего массива выбранных значений сделать отдельные для каждого из свойств.

Чтобы не дублировались чекбоксы, создавать их на основе уникализированных массивов значений свойства вместо массива данных.

Чтобы поменьше копипастить, оформить чекбоксы в отдельный компонент - принимает массив доступных значений, массив выбранных значений, функцию установки выбранных значений.

Собственно фильтрация - для каждого из свойств проверять, что соответствующий массив выбранных значений пуст или содержит значение свойства элемента массива данных.

https://jsfiddle.net/bqyxa0kL/