Um possível bug, pode ter passado batido. Ao adicionar a option de selecionar o amigo, surgiu um comportamento que pode afetar a aplicação( Botão de sortear habilitado mesmo sem o amigo ter sido selecionado).
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Um possível bug, pode ter passado batido. Ao adicionar a option de selecionar o amigo, surgiu um comportamento que pode afetar a aplicação( Botão de sortear habilitado mesmo sem o amigo ter sido selecionado).
Oi, Dedson, tudo bem?
No vídeo, o instrutor adiciona uma opção padrão no campo de seleção de nome, que é <option>Selecione seu nome</option>. Isso é feito para que, quando a página for carregada e o campo de seleção for montado, essa opção seja exibida por padrão. Isso pode ajudar a evitar que o botão de sortear seja acionado sem que um nome seja selecionado.
No entanto, parece que a aplicação ainda permite que o botão de sortear seja clicado mesmo quando a opção padrão está selecionada. Uma possível solução para isso seria adicionar uma verificação para desabilitar o botão de sortear quando a opção padrão estiver selecionada. Podemos usar o código abaixo no arquivo "Sorteio.tsx" que está localizado na pasta "páginas" dentro da pasta "src".
<button className="botao-sortear" disabled={participanteDaVez === '' || participanteDaVez === 'Selecione seu nome'}>Sortear</button>
Essa condição vai verificar se o valor atual de participanteDaVez é igual à string "Selecione seu nome" ou se está vazio e vai desabilitar o botão caso uma destas condições seja verdadeira.
O código completo com a modificação, ficaria assim:
// src/paginas/Sorteio.tsx
import { useState } from "react"
import Card from "../componentes/Card"
import { useListaDeParticipantes } from "../state/hook/useListaDeParticipantes"
import { useResultadoSorteio } from "../state/hook/useResultadoSorteio"
import './Sorteio.css'
const Sorteio = () => {
const participantes = useListaDeParticipantes()
const [participanteDaVez, setParticipanteDaVez] = useState('')
const [amigoScreto, setAmigoSecreto] = useState('')
const resultado = useResultadoSorteio()
const sortear = (evento: React.FormEvent<HTMLFormElement>) => {
evento.preventDefault()
if (resultado.has(participanteDaVez)) {
setAmigoSecreto(resultado.get(participanteDaVez)!)
}
}
return (<Card>
<section className="sorteio">
<h2>Quem vai tirar o papelzinho?</h2>
<form onSubmit={sortear}>
<select
required
name="participanteDavez"
id="participanteDavez"
placeholder="Selecione o seu nome"
value={participanteDaVez}
onChange={evento => setParticipanteDaVez(evento.target.value)}
>
<option>Selecione seu nome</option>
{participantes.map(participante => <option key={participante}>{participante}</option>)}
</select>
<p>Clique em em sortear para ver quem é seu amigo secreto!</p>
<button className="botao-sortear" disabled={participanteDaVez === '' || participanteDaVez === 'Selecione seu nome'}>Sortear</button>
</form>
{amigoScreto && <p className="resultado" role="alert">{amigoScreto}</p>}
<footer className="sorteio">
<img src="/imagens/aviao.png" className="aviao" alt="Um desenho de um avião de papel" />
</footer>
</section>
</Card>)
}
export default Sorteio
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!