Botão de sortear habilitado mesmo sem amigo 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!