React checkbox doesn't keep toggled (think is in infinite loop) - reactjs

Question

Basically i have this:
const [searchUser, setSearchUser] = useState<string[]>([])
Which i pass as a filter on an array:
reportsData
.filter((value: any) =>
searchUser.length > 0
? searchUser.includes(value.user.name)
: true
)
And i created checkboxes that passes values to this searchUser state so i can filter my array with one (or multiple checkboxes)
Like this:
const EmittersComponent: React.FC<PropsButton> = ({ label, onSelect }) => {
const [checked, setChecked] = useState(false)
function handleSelect() {
onSelect(label)
setChecked(!checked)
}
return (
<div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
<li className="mt-4 flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
onChange={() => {
setChecked(checked)
handleSelect()
}}
checked={checked}
className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<span className="font-medium text-gray-700">
{label || 'Sem nome'}
</span>
</div>
</li>
</div>
)
}
function handleToggle(label: string) {
setSearchUser((prev) =>
prev.some((item) => item === label)
? prev.filter((item) => item !== label)
: [...prev, label]
)
}
const emittersComponent = () => (
<div>
{emittersData.map((value: any, index: any) => (
<EmittersComponent
key={index}
label={value.Attributes[2]?.Value}
onSelect={handleToggle}
/>
))}
</div>
)
Then i render it on my react component <ul>{emittersComponent()}</ul>
But the thing is, it is working everything correctly (if i select one or multiple checkboxes, it filters my array), but the checkbox won't keep toggled. It will render as if it was untoggled (the blank, unchecked box) no matter what i do.
I think is in an infinite loop and i can't fix it.

Answer 1

You have called setChecked in the
onChange={() => {
setChecked(checked)
handleSelect()
}}
and then setChecked is calling inside handleSelect function. That is not correct.
I assume it should be onChange={handleSelect}

Answer 2

You are creating a component inside another component with its own state, therefore a emittersComponent is created in every render.
Move Emitters component and emittersComponent(changed to EmittersComponentList ) function out of Quick Sight Component.
Try the below if this doesnt work then you have to have a logic to know which of the emittersData is checked.
const EmittersComponentList = ({ emittersData, handleToggle }) => (
<div>
{emittersData.map((value: any, index: any) => (
<EmittersComponent
key={value.Attributes[2]?.Value} // Dont add index as the key, add some unique val
label={value.Attributes[2]?.Value}
onSelect={handleToggle}
/>
))}
</div>
);
const EmittersComponent: React.FC<PropsButton> = ({ label, onSelect }) => {
const [checked, setChecked] = useState(false);
function handleSelect() {
onSelect(label);
setChecked(!checked);
}
return (
<div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
<li className="mt-4 flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
onChange={() => {
setChecked(checked);
handleSelect();
}}
checked={checked}
className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<span className="font-medium text-gray-700">
{label || "Sem nome"}
</span>
</div>
</li>
</div>
);
}
;
In your Quick Sight Component
<div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-6">
<div>
<span className="text-xl font-medium text-accent-9">
Escolha os emissores:
</span>
<ul>
{
/* Instead of emittersComponent()
use below
*/
<EmittersComponentList
emittersData={emittersData}
handleToggle={handleToggle}
/>
}
</ul>
</div>
<div>