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.

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).

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.

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

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”.

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.

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.

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

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:

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:

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.

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:

Finalização do projeto

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

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

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

Autor: Hagleyson Fernandes Leite