Bug na escolha das oficinas quando client muda value

[isaacmsl]

Importante: Console.log em participantes e logo após return em handleSubmit()

1º Preencha corretamente todos os inputs no form
2º Mude o value da oficina selecionada
3º Dê submit e veja o resultado no console.log

   {
      oficinas: ["Clarinete"]
   }

Mesmo depois de deselecionar.

[isaacmsl]

Solução para não repetir: na função handleSelectOficina, antes de adicionar a nova oficina na array, verificar também se ela não existe na array.

function handleSelectOficina(e) {
    const oficina = e.target.value
    
    if(e.target.checked && !selectedOficinas.includes(oficina)) { // aqui
        selectedOficinas.push(oficina)
        setSelectedOficinas(selectedOficinas)
    } else if(!e.target.checked && selectedOficinas.includes(oficina)) {
        selectedOficinas.splice(selectedOficinas.indexOf(oficina), 1)
    }
}

[isaacmsl]

E eu vi algo muito inusitado 😮 ... Se você mudar o value de um checkbox, ao marcar pela primeira vez, o valor é o que você colocou, mas se você desmarcar em seguida, o value volta ao padrão rederizado. Absurdo!

Imaginem o cenário: No checkbox "Saxofone" eu mudo o valor para "Berimbau". Ao marcar, o valor adicionado na array é Berimbau. Se eu desmarcar e marcar novamente, o valor adicionado é "Saxofone".

Resumindo, vamos ignorar o caso em que o cliente muda o value do checkbox. Ele só vai adicionar um valor que não vai poder mais retirar... e se ele colocar uma oficina maluca como "Berimbauzin", o validator não vai deixar passar.