Checkbox can't change on click (Infinity function return)-CodePudding

When you click on a checked checkbox, nothing happens, it doesn't change it to unchecked, does anyone know how to make that checkbox change?

I think it's because the function is still executed, so there's a loop and it returns "checked", so you can't click on it.

function checkCheckedOnEdit(id_data){
      if(filterListOnID)
      for(var i = 0; i < filterListOnID.length; i  ) {
        if(filterListOnID[i].filter_name_id == id_data){
          return "checked";
        }
      }
     }

<label>Filtry</label>
                    { filterList && (
                      filterList.map(function(item, id) {
                          return(
                            <div className='filters-list'>
                              <input type="checkbox" {...register("admin_subcategory_edit_filters")} value={item.id} checked={checkCheckedOnEdit(item.id)} />
                              {item.name}
                            </div>
                      )}.bind(this))
                      )
                    }

CodePudding user response：

Add an onChange listener:

const addItemToFilter = (id) => {
  if(!filterListOnID) return;

  const itemIndex = filterListOnID.findIndex(el => el.filter_name_id === id);

  if(itemIndex !== -1) return;
  setFilterListOnID([...filterListOnID, id]);
}

<input type="checkbox" {...register("admin_subcategory_edit_filters")} value= 
    {item.id} checked={checkCheckedOnEdit(item.id)} onChange={() => 
    addOrRemoveItemFromFilter(item.id) } />