Checklist component not functioning as suppose to

I have a checklist component which is expected to be a reusable component, unfortunately it checks in an awkward manner and eventually does not fit the need

import React from 'react'

function CheckBox(props) {
    const $ = (selector) => {
        return document.querySelector(selector)
    }

    return (
        <div className="checkbox-holder">
            <input type="checkbox" name={name} 
                className="hidebx" 
                id={count} 
                value={value} 
        onChange={(e) => props.func(() => {
                    let form = $('#filterForm')
                    let concatArray = []
                    for (let i = 0; i < filterform.length; i++) {
                        if (form[i].checked) concatArray =         [...concatArray, form[i].value]
                    }
                    
                    return [concatArray]
                })}
            />
            <label htmlFor={props.count} className="form-checkbox">{props.value}</label>
        </div>
    )
}

export default CheckBox

>Solution :

Your iteration doesn’t seem to be right, however you should have probably destructured the props before using it’s values. your answer should looki something like this.

import React from 'react'

function CheckBox(props) {
const $ = (selector) => {
    return document.querySelector(selector)
}

return (
    const {name, count, value} = props;
    <div className="checkbox-holder">
        <input type="checkbox" name={name} 
            className="hidebx" 
            id={count} 
            value={value} 
    onChange={(e) => props.func(() => {
                let form = $('#filterForm')
                let concatArray = []
                for (let i = 0; i < form.length; i++) {
                    if (form[i].checked) concatArray = [...concatArray, 
 form[i].value]
                }
                
                return [concatArray]
            })}
        />
        <label htmlFor={props.count} className="form-checkbox">. 
{props.value}</label>
    </div>
)

}

export default CheckBox