{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Claudio Neto","description":"The latest articles on DEV Community by Claudio Neto (@claudionts).","link":"https:\/\/dev.to\/claudionts","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F559258%2Ff53aebf6-3598-4b5d-905b-2da21a865859.jpg","title":"DEV Community: Claudio Neto","link":"https:\/\/dev.to\/claudionts"},"language":"en","item":{"title":"Utilizando o Formik\u00a0Context","pubDate":"Wed, 13 Jan 2021 18:34:35 +0000","link":"https:\/\/dev.to\/claudionts\/utilizando-o-formik-context-15na","guid":"https:\/\/dev.to\/claudionts\/utilizando-o-formik-context-15na","description":"<p>Com o uso do Formik Context \u00e9 mais f\u00e1cil de organizar a estrutura de seus formul\u00e1rios, deixando de lado a preocupa\u00e7\u00e3o de ficar passando v\u00e1rias propriedades entre os componentes; facilitando tamb\u00e9m a cria\u00e7\u00e3o de componentes gen\u00e9ricos.<br>\nNa imagem abaixo vemos como funciona o Formik Context. Declarando o formul\u00e1rio Formik, seus elementos filhos tem o acesso instant\u00e2neo do estado atual do formul\u00e1rio declarado no componente pai.<\/p>\n\n<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>\n\n<p>Posso colocar meu formul\u00e1rio com duas sess\u00f5es separadas em componentes diferentes, AddressForm (formul\u00e1rio de endere\u00e7o) e ProfileForm (formul\u00e1rio do perfil do usu\u00e1rio), dessa forma voc\u00ea consegue organizar melhor seus formul\u00e1rios no projeto. N\u00e3o precisando passar a inst\u00e2ncia do Formik em cada componente criado, possibilitando gerenciar todas sess\u00f5es do seu formul\u00e1rio em um \u00fanico contexto.<\/p>\n\n<p>Bora pro c\u00f3digo?!<br>\nVamos 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>\nExecutando os comandos abaixo no terminal criamos o projeto:<\/p>\n\n\n<div class=\"ltag_gist-liquid-tag\">\n  \n<\/div>\n\n\n<p>Ap\u00f3s criar o projeto, iremos usar o trecho de c\u00f3digo abaixo no arquivo App.tsx, para testarmos o Formik Context:<\/p>\n\n<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>\n\n<p>O conte\u00fado digitado no input ser\u00e1 consultado e exibido instant\u00e2neamente em outro componente, resultado:<\/p>\n\n<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>\n\n<p>Ter\u00e1 novos artigos sobre o assunto, demonstrando o formul\u00e1rio com v\u00e1rias sess\u00f5es, e tamb\u00e9m a cria\u00e7\u00e3o de Input e Autocomplete Gen\u00e9ricos<\/p>\n\n<p><iframe src=\"https:\/\/codesandbox.io\/embed\/cranky-bhaskara-b5lbt\">\n<\/iframe>\n<\/p>\n\n"}}}