Limpar Campos do Formulário, após clicar no botão de Criar Card

Olá Antonio!

Estranho, primeiro, verifique se as variáveis de estado nome, cargo, imagem e time estão sendo definidas corretamente no seu componente. Elas devem ser inicializadas usando o useState do React, algo como:

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

Verifica se os campos do formulário estão vinculados a essas variáveis de estado. Por exemplo, o campo de entrada para o nome deve ter algo assim:

<input
  type="text"
  value={nome}
  onChange={(e) => setNome(e.target.value)}
/>

Repita isso para os outros campos (cargo, imagem, time).

Se tudo estiver configurado corretamente, ao chamar setNome(""), setCargo(""), setImagem(""), e setTime(""), os campos do formulário devem ser limpos, pois você está redefinindo o estado que controla o valor desses campos.

Se o erro persistir, compartilha seu projeto comigo, vou ficar feliz em ajudar.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Olá boa tarde! Muito obrigado por responder. segue o link do meu projeto:

https://github.com/juniorguaracho/organo

Segue o deploy na vercel: https://organo-five-jet-69.vercel.app/

Trecho do código:

const Formulario = (props) => { const [nome, setNome] = useState(""); const [cargo, setCargo] = useState(""); const [imagem, setImagem] = useState(""); const [time, setTime] = useState("");

const aoSalvar = (evento) => { evento.preventDefault(); props.aoColaboradorCadastrado({ nome, cargo, imagem, time, }); setNome(""); setCargo(""); setImagem(""); setTime(""); };

Porém, não deu certo. Está igual ao do instrutor do curso, mas não limpa os campos. Eu não entendi foi nada, do pq de funcionar no dele e no meu não.

Olá, Antonio!

No seu componente de CampoTexto você não colocou o atributo de "value" no input :

<div className="campo-texto">
      <label>{props.label}</label>
      <input
        onChange={aoDigitado}
        required={props.obrigatorio}
        placeholder={props.placeholder}
      />
</div>

O campo de input deve receber o atributo value referenciando a variavel usada no hook, que no caso seria o "valor" que você passa como prop, assim corrigindo o componente CampoTexto ficaria:

<div className="campo-texto">
      <label>{props.label}</label>
      <input
        onChange={aoDigitado}
        required={props.obrigatorio}
        placeholder={props.placeholder}
        value={props.valor}
      />
</div>

Olá Thiago, bingo!

Era exatamente isso meu caro, muito obrigado. Acabou passando batido essa linha. Após feita a inclusão do value, está limpando os campos após a inserção.

Muito obrigado pela ajuda!