como armazenar o fomulario

Olá Cicero! Tudo ok contigo?

No React, uma maneira comum de fazer isso é usando o estado do componente.

Para cada campo do seu formulário, você pode ter uma variável de estado correspondente. Quando o usuário preenche o campo, você atualiza a variável de estado correspondente. Aqui está um exemplo básico de como você pode fazer isso:

import React, { useState } from 'react';

function Formulario() {
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Nome:', nome);
    console.log('Email:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nome}
        onChange={(event) => setNome(event.target.value)}
      />
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default Formulario;

Neste exemplo, temos dois campos de formulário: um para o nome e outro para o email. Cada um tem uma variável de estado correspondente (nome e email). Quando o usuário digita algo em um campo, a função onChange é acionada, atualizando a variável de estado correspondente com o novo valor.

Quando o usuário clica no botão "Enviar", a função handleSubmit é acionada. Nesta função, estamos apenas imprimindo os valores de nome e email no console, mas você poderia, por exemplo, enviar esses dados para um servidor, armazená-los em um banco de dados ou salvar em localStorage.

Em suma era isso.

Espero ter ajudado! Abraços e bons estudos!

Ao salvar em localStorage, se o computador for desligado eu perco os dados como evito isso.

Olá Cicero! Tudo ok?

Para evitar a perda de dados ao desligar o computador, podemos melhorar o exemplo anterior usando o localStorage de uma maneira um pouco diferente. O localStorage é persistente, mas você precisa garantir que os dados sejam carregados novamente quando o aplicativo é inicializado.

Vou ajustar o exemplo do formulário para incluir a funcionalidade de salvar e carregar os dados do localStorage. Aqui está como você pode fazer isso:

import React, { useState, useEffect } from 'react';

function Formulario() {
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');

  useEffect(() => {
    // Carregar dados do localStorage quando o componente é montado
    const storedData = localStorage.getItem('formData');
    if (storedData) {
      const { nome, email } = JSON.parse(storedData);
      setNome(nome);
      setEmail(email);
    }
  }, []);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Nome:', nome);
    console.log('Email:', email);

    // Salvar dados no localStorage
    const formData = { nome, email };
    localStorage.setItem('formData', JSON.stringify(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nome}
        onChange={(event) => setNome(event.target.value)}
      />
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default Formulario;

Neste exemplo, utilizei o hook useEffect para carregar os dados do localStorage quando o componente é montado. Assim, mesmo que o computador seja desligado, os dados serão carregados na próxima vez que o usuário acessar a aplicação.

Espero que isso ajude a esclarecer sua dúvida.

Abraços e bons estudos.