Detectar item clicado - Pergunta importante | React parte 2: Validação, Rotas e Integração com API

Minha dúvida não diz respeito a essa parte do curso, mas não sabia onde perguntar. Tenho um map que me traz vários itens e cada um tem um toggle. Eu clico no toggle e ele abre um modal, lá tem um texto me informando o que acontece se eu concordar em desativar o toggle. Ao clicar no botão onde concordo com a consequência eu fecho o modal, mas queria alterar também o estado do toggle clicado, mas está alterando de todos toggles que vêm do json. Isso é um caso bem recorrente no nosso dia a dia e acontece em outros contextos também. Por isso queria entende como fazer. O fato é que não estou sabendo como dizer pro react em qual o item estou clicando e pedindo para ele alterar o estado somente dele.

Ex da função que fecha o modal:

  function handleAllChecks (name: any) {
      setActiveModal(false) // fecha o modal
      setHeaderChecked(!headerChecked) // altera o estado no toggle, para True ou False
  }

Fala ai Afrânio, tudo bem? Bom, vamos lá, esse problema pode ser resolvido de N maneiras, o que eu recomendaria:

Você ter um array onde vai definir quais toggle's estão ativos, ou seja:

const [activatedToggles, updateActivatedToggles] = useState([])

Dessa maneira, cada toggle teria um identificador único, seja um id ou um nome.

Uma vez que o click foi feito para algum dele, você adicione o identificador do mesmo para dentro desse array.

handleToggleClick = (name) => {
    const alreadyActive = activatedToggles.includes(name)
    if (alreadyActive) {
        updateActivatedToggles(oldToggles => oldToggles.filter(toggle => toggle !== name))
    } else {
        updateActivatedToggles(oldToggles => [...oldToggles, name])
    }
}

Assim, se clicar ele vai incluir e se clicar no mesmo novamente ele vai remover.

Depois, para marcar um toggle como selecionado você usa o includes como está ai em cima.

<Toggle isActive={activatedToggles.includes('meu-nome)} />

A ideia seria mais ou menos essa.

Espero ter ajudado.

Mergulhe em programação