Construção de Formik Field Array com React Js

Muitas vezes no desenvolvimento de projetos de software, nos deparamos com a necessidade de obter dados dos usuários em nosso site. Normalmente, não fazemos ideia da quantidade de informações que precisaremos armazenar. Por isso, o melhor é salvar os dados em um Array, essa é a proposta do Formik Field Array.

Com ele, sempre teremos a quantidade correta de dados armazenado. Neste artigo, vamos fazer juntos um projeto para entender melhor.

[adrotate banner=”4″]

Formik na prática

Os requisitos para a criação do Formik Field Array são:

  • Ter o node instalado;
  • Possuir um editor de código.

O primeiro passo para iniciar é criar o projeto React Js. Para isso, iremos utilizar o seguinte comando:

npx create-react-app my-app

Se estiver com dificuldades para executar o comando de criação, recomendo que acesse a documentação usando o link a seguir: https://github.com/facebook/create-react-app

Preparando o projeto

Depois do projeto criado, você deve abrir no editor de código de sua preferência. Depois de aberto, o seu projeto deve parecer com a imagem abaixo (lembrando que pode mudar de acordo com a versão do React Js).

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 1

Logo após isso, vamos instalar o Formik, para utilizar o Field Array. Então, vamos abrir o terminal (linux e mac) ou cmd (windows), navegar até a pasta do projeto e utilizar o seguinte comando:

npm install formik

Abrindo o package.json, podemos ver que o Formik foi instalado.

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 2

Por último, vamos usar o comando npm start para rodar o projeto. Neste momento, o programa deve abrir uma nova aba no seu navegador mostrando o projeto inicial React. Caso não abra, você deve abrir seu navegar e digitar: localhost:3000

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 3

Usando Formik Fiel Array

Para o projeto ficar mais organizado, iremos criar uma pasta dentro de src com o nome “components” e dentro dela um componente chamado “Form.js”.

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 4

No arquivo Form.js, vamos importar os arquivos necessários e criar um componente funcional com um formulário e uma instância do Formik. Assim, o resultado podemos ver na imagem abaixo.

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 5

Dessa forma, podemos ver na imagem acima que foram importados:

  • FieldArray: possibilita o uso de vários formulários dinamicamente;
  • useFormik: hook que permite o uso de várias ferramentas do Formik;
  • FormikProvider: engloba o FieldArray para passar tudo o que é necessário para seu funcionamento;
  • Field: componente que o Formik utiliza para usar inputs.

Dentro do componente, instanciamos o Formik e passamos os valores iniciais (initialValues), a função que vai ser executada quando o formulário for enviado(onSubmit), e no retorno da função um formulário com o submit apontando para o formik handleSubmit.

Para poder ver o formulário na tela do navegador, temos que chamar esse componente no App.js. Então, vamos aproveitar e tirar as linhas de código desnecessárias.

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 6

Se você fez tudo certo até aqui, o resultado deve ser similar à imagem abaixo:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 7

Inserindo no formulário

Voltando ao arquivo Form.js, vamos inserir dentro do formulário o FormikProvider, em que ele recebe uma propriedade chamada value. Recebendo a instancia do Formik, dentro do FormikProvider, iremos colocar o FieldArray, que recebe duas propriedades.

A primeira é o name, que recebe o nome da propriedade em que os valores ficaram armazenados. Já a segunda propriedade é o render, que recebe uma função em que passamos um parâmetro que iremos utilizar no decorrer do projeto e retornará um componente que será renderizado na tela. Veja na imagem abaixo:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 8

Assim, podemos ver na imagem acima que no render foram criadas algumas validações para poder renderizar os componentes. Isso porque, como salva em um array, se ele for menor que zero ou não existir, não deve ser exibido nada.

Na imagem também podemos ver o uso do Field recebendo o atributo name. Esse atributo diz onde o valor deve ser armazenado. Neste caso, ficará salvo dessa forma:

family:[{name:”fulano”,kinship:”pai”}].

Component

Além disso, outro atributo muito legal do Field é o component, em que podemos passar o tipo de input html que queremos renderizar. Quando isso não for passado, ele irá retornar com um input do tipo texto.

O resultado até agora é esse:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 9

Agora, vamos adicionar três botões: um para adicionar um novo campo; outro para remover um input; e o terceiro para submeter o formulário.

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 10

Dessa forma, podemos ver que o tipo dos botões de remover e adicionar é button. Isso serve para evitar o envio do formulário. No onClick, utilizamos “param”, que veio da propriedade da função. Assim, utilizamos dois métodos: push (adiciona no final do Array) e remove (remove de acordo com o index passado).

Se você fez tudo certo até aqui, o resultado deve ser similar à imagem abaixo:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 11

Finalização do projeto

Neste momento, vamos adicionar quatro campos e preencher. Dessa forma, o resultado será:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 12

Agora, clicando em enviar o resultado e abrindo o console, podemos ver o seguinte resultado:

Construção de Formik Field Array com React Js Luby Software
Construção de Formik Field Array com React Js 13

Com isso, finalizamos esse tutorial. Se você tiver dúvidas, deixe nos comentários!

Autor: Hagleyson Fernandes Leite

[adrotate banner=”5″]

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!
Transformação Digital Logo Luby Azul

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima