React li choose one at a time-CodePudding

const [filters, setFilters] = useState({
    category: '',
    
  });

const makeFilter = (property, newFilterValue) => () => {
    setFilters({
        ...filters,
        [property]: newFilterValue,
    });
};

<ul>
                    <li onClick={makeFilter('category', 'Access Control System')}>Access Control System</li>
                    <li onClick={makeFilter('category', 'Accessories')}>Accessories</li>
                    <li onClick={makeFilter('category', 'Auto Door System')}>Auto Door System</li>
                    <li onClick={makeFilter('category', 'Backup Battery')}>Backup Battery</li>
                    <li onClick={makeFilter('category', 'Card & Weigand Reader')}>Card & Weigand Reader</li>
                    <li onClick={makeFilter('category', 'CCTV Recorders')}>CCTV Recorders</li>
                    <li onClick={makeFilter('category', 'CCTV Security Camera System')}>CCTV Security Camera System</li>
                    <li onClick={makeFilter('category', 'Display Monitor')}>Display Monitor</li>
                    <li onClick={makeFilter('category', 'Draka Cable')}>Draka Cable</li>
                    <li onClick={makeFilter('category', 'IP PBX System')}>IP PBX System</li>

I use my filter function in a li by onClick.Is it possible to make the li only can choose one at a time?

CodePudding user response：

on click should be onClick={() => makeFilter('property', 'newFilterValue')}

Please replace all li

<li onClick={makeFilter('category', 'Access Control System')}>Access Control System</li>

with

<li onClick={() => makeFilter('category', 'Access Control System')}>Access Control System</li>

CodePudding user response：

I'm not sure that I'm interpreting your question correctly, but I believe you are curious if you can make it so that only one <li> element can be selected at a time.

This is most easily accomplished with <input> elements with a type="radio" that share the same name.

   <ul>
        <li><input type="radio" name="age">20-30 years</input></li>
        <li><input type="radio" name="age">30-40 years</input></li>
        <li><input type="radio" name="age">40-50 years</input></li>
        <li><input type="radio" name="age">50-60 years</input></li>
        <li><input type="radio" name="age">60-70 years</input></li>
    <ul>

Here, all the input's have the same name, so if you select one then try to select another it will remove the previous selection.