Обработка проверок с несколькими флажками реагирует ⇐ Html

[Anonymous]

Я создал компонент, который использует несколько флажков, отображаемых в функции .map < /code>.
Когда я тестировал функциональность, я заметил, что вы могли бы проверить несколько флажков одновременно. Видя, как компонент используется в качестве меню фильтрации для другого компонента, имеющего несколько проверок одновременно, не будет иметь смысла для пользователей. Функциональность в любом случае является скорее визуальной ошибкой.import React, { useState } from 'react';

const checkboxes = [
{
heading : 'Price',

labels : [
{
label: 'Up to £39.99',
filter: '0',
filterLimit: '39.99',
},
{
label: '£40 to £59.99',
filter: '40',
filterLimit: '59.99',
},
{
label: '£60 to £79.99',
filter: '60',
filterLimit: '79.99',
},
{
label: '£80 to £99.99',
filter: '80',
filterLimit: '99.99',
},
{
label: '£100 to £199.99',
filter: '100',
filterLimit: '199.99',
},
],
},

{
heading : 'Brand',

labels : [
{
label: 'BrandA',
filter : 'BrandA',
},
{
label: 'BrandB',
filter: 'BrandB',
},
{
label: 'BrandC',
filter: 'BrandC',
},
{
label: 'BrandD',
filter: 'BrandD',
},
{
label: 'BrandE',
filter: 'BrandE',
},
],
},
];

export default function Sidebar(props) {
const isntDesktop = props.isntDesktop;

const sidebar = props.sidebar;
const setSidebar = props.setSidebar;

const setLoading = props.setLoading;
const setFilter = props.setFilter;
const setFilterLimit = props.setFilterLimit;

return (

{/* Overlay */}
{sidebar && isntDesktop && (

)}

{/* Sidebar */}
{sidebar && (

{/* Close button */}
{isntDesktop && (
/* Attribution: https://heroicons.com */
setSidebar(!sidebar)}
class="w-6 h-6 absolute right-5 top-5 cursor-pointer"
>


)}

{/* Checkboxes */}
{checkboxes.map((checkbox, index) => {
return (


{checkbox.heading}

{checkbox.labels.map((label, index) => {
return (
{
setLoading(true);
setFilter(label.filter);
setFilterLimit(label.filterLimit);
}}
class="mt-2.5"
>


{label.label}


)
})}




)
})}

)}

)
}


Подробнее здесь: https://stackoverflow.com/questions/743 ... oxes-react