lundi 25 octobre 2021

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

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.




Aucun commentaire:

Enregistrer un commentaire