Formulário multi step com React
Tags: react, javascript, frontend, forms
Published: 2021-01-06 23:43:42

## Este é um post com uma idéia de formulário multi step criado em ReactJS.

> Formulários **multi step** são aqueles formulários divididos em etapas diferentes que o usuário vai preenchendo e seguindo um passo a passo. 

Geralmente são feitos dessa forma para que o preenchimento não fique cansativo e chato com uma tela cheia de campos.
Um bom exemplo é um formulário de checkout, em que o usuário precisa inserir dados pessoais, de entrega e pagamento.

### Vamos ao código

Primeiro vamos criar a estrutura dos passos do form:
```jsx
const steps = [
  {
    id: 'PERSONAL',
    title: "Dados pessoais"
  },
  {
    id: 'SHIPPING',
    title: "Endereço de entrega"
  },
  {
    id: 'PAYMENT',
    title: "Dados de pagamento"
  }
];
```
A idéia é bem simples. Um array com a lista de passos em que poderemos usar o index para navegar no formulário e exibir os inputs de acordo com o ID.

Vamos usar um state e uma função para renderizar o próximo passo:

```jsx
const [currentStep, setCurrentStep] = useState(0);

function handleNextStep() {
  setCurrentStep((prevState) => prevState + 1);
}
```
O state **currentStep** é iniciado com o valor de 0 para renderizar o primeiro item do array.

A função **handleNextStep** pega o valor atual do state **currentStep** e incrementa o valor, dessa forma irá renderizar o seguinte item do array.

Para renderizar os inputs no JSX podemos usar o valor do state e o ID do item para criar uma condição e exibir os campos do formulário.

```jsx
{steps[currentStep].id === 'PERSONAL' && (
  <div className="fields">
    <div className="field">
      <input
        type="text"
        placeholder="Nome"
        name="name"
        onChange={handleInputChange}
        value={formValues.name}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="E-mail"
        name="email"
        onChange={handleInputChange}
        value={formValues.email}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="Telefone"
        name="phone"
        onChange={handleInputChange}
        value={formValues.phone}
      />
    </div>
  </div>
)}
```

Para salvar os dados preenchidos podemos usar um state para todos os campos e uma função para setar esses valores de forma dinâmica.

```jsx
const [formValues, setFormValues] = useState({
  name: "",
  email: "",
  phone: "",
});

function handleInputChange(event) {
  const { name, value } = event.target;

  setFormValues((prevState) => ({
    ...prevState,
    [name]: value
  }));
}
```
A função **handleInputChange** pega o *name* e o *value* do evento para setar de forma dinâmica os valores no state **formValues**

Por fim vamos renderizar os botões de avançar ou enviar formulário caso o passo atual seja o último.

```jsx
{currentStep < steps.length - 1 && (
  <button 
    className="button next" 
    type="button" 
    onClick={handleNextStep}
  >
    Próximo
  </button>
)}

{currentStep === steps.length - 1 && (
  <button className="button submit" type="submit">
    Enviar
  </button>
)}
```
Com isso nosso formulário está completo, avançando de passo em passo até o submit.

### Concluindo
Esta é apenas uma das muitas formas de se criar um formulário multi step em React. 
Uma outra abordagem bem usada é recuperar os passos do formulário de uma API, podendo assim criar diferentes passos dependendo do retorno.

Acesse a [demo no codesandbox](https://codesandbox.io/s/multi-steps-form-084f6) para conferir o código completo e o formulário funcionando.