[Dúvida] Como impedir o usuário de enviar um time vazio?

Opa Eduardo, tudo certo?

Quando comenta de outro tópico que adiciona uma condição, está se referindo a este tópico?

Nesse caso, você pode adicionar a função no componente do formulário, logo onde salvamos, na função "aoSalvar" depois de "e.preventDefault();".

Para fazer a validação se há ou não o time, como o "time" já está definido no estado no useState, pode comparar pelo nome "time" mesmo, algo nessa linha:

if (time === "") {
      alert("Por favor, selecione um time!");
      return;
}

A função completa fica:

const aoSalvar = (e) => {
    e.preventDefault();
    if (time === "") {
      alert("Por favor, selecione um time!");
      return;
    }
    props.aoColaboradorCadastrado({
      nome: nome,
      cargo: cargo,
      imagem: imagem,
      time: time,
    });
    setNome("");
    setCargo("");
    setImagem("");
    setTime("");
  };

Ademais, você também pode passar o required para o próprio HTML não aceitar o vazio. Para isso, no componente da "ListaSuspensa" passe o required={props.obrigatorio} e na lista suspensa no componente do "Formulario" passe o obrigatorio={true}, conforme realizada em aula.

Porém, recomendo realizar as duas operações.

Fico à disposição.

Tenha um bom dia e bons estudos.

Obrigado, Gabriel! Era desse tópico mesmo que eu estava falando. Sua dica ajudou bastante e consegui resolver das duas formas que sugeriu.

Quero aproveitar para tirar mais uma dúvida. Eu tentei criar uma opção personalizada. Em vez da primeira opção ser vazia, eu queria que ela tivesse um nome genérico como "Selecione um time". Daí, iria até o Formulário e pediria para não deixar cadastrar um colaborador caso tivesse escolhido essa opção. Tentei seguir a mesma lógica de como faria com a opção vazia. Mas por alguma razão, essa opção personalizada não aparece no campo de time do formulário. O que aparece para mim é a opção vazia que estava antes. Por que isso aconteceu?

Vou passar o código da forma que escrevi. Dentro do ListaSuspensa:

                <select onChange={evento => props.aoAlterar(evento.target.value)} required={props.obrigatorio} value={props.valor}>
                <option value={"Selecione um time"}></option>
                    {props.itens.map(item => {
                        return <option key={item}>{item}</option>
                    })}
                </select>

Dentro do Formulario:

const aoSalvar = (evento) => {
        evento.preventDefault()
        if (time === "Selecione um time") {
            alert("Por favor escolha um time")
            return;
        }
        props.aoColaboradorCadastrado({
            nome,
            cargo,
            imagem,
            time
        })

        setNome('')
        setCargo('')
        setImagem('')
        setTime('Selecione um time')
    }

Tem mais alguma parte do código que eu esqueci de modificar?

Opa Eduardo.

Pelo que entendi está tentando evitar criar um time se a opção “Selecione um time” estiver ativa, certo?

O texto da opção vazia não é modificado quando alteramos o valor por conta dele não ser o responsável por essa mudança. O texto da tag opção é descrito entre a abertura e fechamento da tag, ou seja, no primeiro caso o texto está vazio por não escrevermos nada entre eles:

<option value=""></option>

Nesse caso, como só queremos modificar o texto não precisamos mudar o valor da opção, podemos manter o valor como vazio e colocar o texto manualmente:

<option value="">Escolha um time</option>

Fico à disposição.

Tenha um bom dia e bons estudos.