[Dúvida] Limpeza dos campos em forms com vários inputs

Salve, Matheus!

Excelente pergunta. A gente pode extender essa ela e chegar até "será que o usuário vai ter uma boa experiência com o formulário tão grande"? :)

Existem algumas estratégias pra isso.

• Você pode, por exemplo, usar a Context API para gerir o estado do seu formulário.

• Você também pode ter um estado único, que é um objeto:

import { useState } from 'react'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

const Formulario = (props) => {

    // const [nome, setNome] = useState('')
    // const [cargo, setCargo] = useState('')
    // const [imagem, setImagem] = useState('')
    // const [time, setTime] = useState('')

    const [colaborador, setColaborador] = useState({
        nome: '',
        cargo: '',
        imagem: '',
        time: '',
    })

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado(colaborador)
        setColaborador({
            nome: '',
            cargo: '',
            imagem: '',
            time: '',
        })
    }

    return (
        <section className="formulario">
            <form onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar o card do colaborador</h2>
                <CampoTexto
                    obrigatorio={true}
                    label="Nome"
                    placeholder="Digite seu nome"
                    valor={colaborador.nome}
                    aoAlterado={valor => setColaborador(colaboradorAtual => ({ ...colaboradorAtual, nome: valor }))}
                />
                <CampoTexto
                    obrigatorio={true}
                    label="Cargo"
                    placeholder="Digite seu cargo"
                    valor={colaborador.cargo}
                    aoAlterado={valor => setColaborador(colaboradorAtual => ({ ...colaboradorAtual, cargo: valor }))}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Digite o endereço da imagem"
                    valor={colaborador.imagem}
                    aoAlterado={valor => setColaborador(colaboradorAtual => ({ ...colaboradorAtual, imagem: valor }))}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Time"
                    itens={props.times}
                    valor={colaborador.time}
                    aoAlterado={valor => setColaborador(colaboradorAtual => ({ ...colaboradorAtual, time: valor }))}
                />
                <Botao>
                    Criar Card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario

Para entender melhor como o useState funciona, da uma olhada nesse alura+. Repara que a estratégia é diferente.

• uma outra alternativa é usar uma biblioteca que faça a gestão do formulário pra ti, como por exemplo: a useForm

Gerir formulários é uma das coisas que mais fazemos durante a jornada de frontend, e nunca existe uma bala de prata. Vale a pena conhecermos alternativas e utilizar a estratégia que mais faça sentido pra cada formulário/projeto que trabalhamos.

Bons estudos!