Solucionado
Finalizei o curso e queria implementar no software um botão de voltar, e assim ir para a etapa anterior de cadastro, mas não consigo fazer com que ao voltar os inputs estejam com seus devidos valores já preenchidos, gostaria de saber como implementar esse botão de voltar?
Olá, Cleriston! Tudo certo?
Desculpa pela demora!
No componente FormularioCadastro você possui o estado dadosColetados. Você pode passar ele como props para os formulários, como fazemos com o aoEnviar, e usar o hook useEffect em cada formulário verificando se as propriedades que o componente precisa possuem valores, e se já possuem, você já atualiza os estados internos.
Por exemplo, no caso do DadosPessoais:
function DadosPessoais({ dadosColetados, aoEnviar }) {
const [nome, setNome] = useState("");
const [sobrenome, setSobrenome] = useState("");
const [cpf, setCpf] = useState("");
const [promocoes, setPromocoes] = useState(true);
const [novidades, setNovidades] = useState(false);
const validacoes = useContext(ValidacoesCadastro)
const [erros, validarCampos, possoEnviar] = useErros(validacoes);
useEffect(() => {
if (dadosColetados.nome) {
setNome(dadosColetados.nome);
}
}, []);
Ou você pode fazer isso nas próprias inicializações dos estados, poupando código:
function DadosPessoais({ dadosColetados, aoEnviar }) {
const [nome, setNome] = useState(dadosColetados.nome || "");
const [sobrenome, setSobrenome] = useState(dadosColetados.sobrenome || "");
const [cpf, setCpf] = useState(dadosColetados.cpf || "");
// ...Espero ter ajudado!