The latest articles on DEV Community by Claudio Neto (@claudionts). https://dev.to/claudionts https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F559258%2Ff53aebf6-3598-4b5d-905b-2da21a865859.jpg https://dev.to/claudionts en Claudio Neto Wed, 13 Jan 2021 18:34:35 +0000 https://dev.to/claudionts/utilizando-o-formik-context-15na https://dev.to/claudionts/utilizando-o-formik-context-15na <p>Com o uso do Formik Context é mais fácil de organizar a estrutura de seus formulários, deixando de lado a preocupação de ficar passando várias propriedades entre os componentes; facilitando também a criação de componentes genéricos.<br> Na imagem abaixo vemos como funciona o Formik Context. Declarando o formulário Formik, seus elementos filhos tem o acesso instantâneo do estado atual do formulário declarado no componente pai.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkbjg5f7u3zbbtyl2tfdl.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkbjg5f7u3zbbtyl2tfdl.png" alt="Alt Text"></a></p> <p>Posso colocar meu formulário com duas sessões separadas em componentes diferentes, AddressForm (formulário de endereço) e ProfileForm (formulário do perfil do usuário), dessa forma você consegue organizar melhor seus formulários no projeto. Não precisando passar a instância do Formik em cada componente criado, possibilitando gerenciar todas sessões do seu formulário em um único contexto.</p> <p>Bora pro código?!<br> Vamos criar um projeto com 2 componentes, o primeiro declara o Formik e o input "name", o componente filho acessa o valor do campo "name" no estado do Formik em tempo real e exibe no browser.<br> Executando os comandos abaixo no terminal criamos o projeto:</p> <div class="ltag_gist-liquid-tag"> </div> <p>Após criar o projeto, iremos usar o trecho de código abaixo no arquivo App.tsx, para testarmos o Formik Context:</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5zlhwancrsfry4dcurjx.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5zlhwancrsfry4dcurjx.png" alt="Alt Text"></a></p> <p>O conteúdo digitado no input será consultado e exibido instantâneamente em outro componente, resultado:</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjijwvxlo2lcmgy1csmwx.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjijwvxlo2lcmgy1csmwx.gif" alt="Alt Text"></a></p> <p>Terá novos artigos sobre o assunto, demonstrando o formulário com várias sessões, e também a criação de Input e Autocomplete Genéricos</p> <p><iframe src="https://codesandbox.io/embed/cranky-bhaskara-b5lbt"> </iframe> </p>