React checkbox, only select the first item when I click on the label no matter which label I click, just select the first option

I'm using React.js for my frontend and I'm doing category filters, but for that I used checkbox to mark the category I want and label to show the name of the category, I look like the figure below. enter image description here Now I made a change and passed the input id to label. What is happening is the following whenever I click for whatever label it just selects a first item to be shown. No matter what label I click on, it only selects the first option.

const [checked, setChecked] = useState([])

    const handleToggle = c => () => {
        //return thr first index or -1
        const currentCategoryId = checked.indexOf(c)
        const newCheckedCategoryId = [...checked]
        // if currently not currently in verified state> push
// otherwise pull / take off
        if(currentCategoryId === -1){
        } else{
            newCheckedCategoryId.splice(currentCategoryId, 1)


    return, i) => (
        <li key={i} className="list-group-item d-flex justify-content-between lh-condensed list-unstyled">
                value={checked.indexOf(c._id === -1)}
            <label htmlFor="checkbox" className="form-check-label">{}</label>

Read more here:

Content Attribution

This content was originally published by Hamilton Xavier at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: