- Scan ID:
- 5ad436af-18b1-4a38-b871-e51536c38a8cFinished
- Submitted URL:
- https://www.dtreelabs.com/blog/react-final-form-mutators
- Report Finished:
Links · 8 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://final-form.org/react | React final form |
| https://codesandbox.io/s/affectionate-goldstine-0csfv | https://codesandbox.io/s/affectionate-goldstine-0csfv |
| https://www.npmjs.com/package/react-final-form | React Final Form |
| https://twitter.com/dtreelabs | |
| https://twitter.com/intent/tweet/?text=Mutators%20in%20react%20final%20form%0Afrom%20@DTreeLabs&url=https://dtreelabs.com/blog/react-final-form-mutators | Share on TwitterShare on Twitter |
| https://www.linkedin.com/shareArticle?mini=true&url=https://dtreelabs.com/blog/react-final-form-mutators&title=Mutators%20in%20react%20final%20form&summary=Mutators%20in%20react%20final%20form&source=https://dtreelabs.com/blog/react-final-form-mutators | Share on LinkedInShare on LinkedIn |
| https://reddit.com/submit/?url=https://dtreelabs.com/blog/react-final-form-mutators&resubmit=true&title=Mutators%20in%20react%20final%20form | Share on RedditShare on Reddit |
| https://news.ycombinator.com/submitlink?u=https://dtreelabs.com/blog/react-final-form-mutators&t=Mutators%20in%20react%20final%20form | Share on Hacker NewsShare on Hacker News |
JavaScript Variables · 24 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| gtag | function |
| dataLayer | object |
| webpackChunk_N_E | object |
| regeneratorRuntime | object |
| __NEXT_DATA__ | object |
| __SSG_MANIFEST_CB | function |
| __NEXT_P | object |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en"><head><script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-242LJFC1HZ&l=dataLayer&cx=c"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-147329897-1"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-147329897-1', {
page_path: window.location.pathname,
});
</script><title>Mutators in react final form</title><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width, initial-scale=1" name="viewport"><meta name="robots" content="follow, index"><link href="/favicon.ico" rel="shortcut icon"><meta content="React final form provides out of the box solution to manage the form values but sometimes we need custom mutators to update the form state." name="description"><meta property="og:type" content="website"><meta property="og:site_name" content="DTreeLabs"><meta property="og:description" content="React final form provides out of the box solution to manage the form values but sometimes we need custom mutators to update the form state."><meta property="og:title" content="Mutators in react final form"><meta property="og:image" content="https://dtreelabs.com/react-final-forma-mutators.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@dtreelabs"><meta name="twitter:title" content="Mutators in react final form"><meta name="twitter:description" content="React final form provides out of the box solution to manage the form values but sometimes we need custom mutators to update the form state."><meta name="twitter:image" content="https://dtreelabs.com/react-final-forma-mutators.png"><meta property="article:author" content="Gaurav Singh"><meta property="article:published_time" content="2022-01-27T00:00:00.000Z"><link href="https://unpkg.com/[email protected]/themes/prism-okaidia.css" rel="stylesheet"><meta name="next-head-count" content="20"><link rel="preload" href="/_next/static/css/dfc5d1cdd60fbdf7.css" as="style"><link rel="stylesheet" href="/_next/static/css/dfc5d1cdd60fbdf7.css" data-n-g=""><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-9358614edabc94d9.js" defer=""></script><script src="/_next/static/chunks/framework-91d7f78b5b4003c8.js" defer=""></script><script src="/_next/static/chunks/main-6acc6319b523f0eb.js" defer=""></script><script src="/_next/static/chunks/pages/_app-1373505fef9c4bf0.js" defer=""></script><script src="/_next/static/chunks/421-192ca339d0dfddfc.js" defer=""></script><script src="/_next/static/chunks/pages/blog/%5Bslug%5D-f1bb35dcf97633c3.js" defer=""></script><script src="/_next/static/GYlJMcH42Vdrf_N6ui25C/_buildManifest.js" defer=""></script><script src="/_next/static/GYlJMcH42Vdrf_N6ui25C/_ssgManifest.js" defer=""></script><script src="/_next/static/GYlJMcH42Vdrf_N6ui25C/_middlewareManifest.js" defer=""></script><link as="script" rel="prefetch" href="/_next/static/chunks/pages/category/%5Bslug%5D-1f72cbb0de358371.js"><link as="script" rel="prefetch" href="/_next/static/chunks/685-966e7fcee0439c8e.js"><link as="script" rel="prefetch" href="/_next/static/chunks/pages/careers-88fca4497873c0c8.js"><link as="script" rel="prefetch" href="/_next/static/chunks/pages/blog-1618d186180e6c9b.js"><link as="script" rel="prefetch" href="/_next/static/chunks/115-d26dfb48578df29d.js"><link as="script" rel="prefetch" href="/_next/static/chunks/pages/index-dfdfc92f9e2a4d41.js"></head><body><div id="__next" data-reactroot=""><header class="flex w-full flex-col fixed bg-white shadow shadow-md"><div class="h-16 flex items-center"><div class="container mx-auto"><div class="flex justify-between px-2 md:px-0"><div class="text-grey-custom-2 flex justify-center items-center"><div class="cursor-pointer flex items-center"><img src="/logo.svg" alt="Logo" class="inline w-8 md:w-12 w-8 md:h-12 mr-0 md:mr-2"><span class="text-lg md:text-xl text-black-custom-1">DTreeLabs</span></div></div><div class="flex items-center"><div class="flex items-center"><div class="mx-4"><a class="text-grey-custom-2 cursor-poninter hover:text-black " href="/blog">Blog</a></div></div><div class="flex items-center"><div class="mx-4"><a class="text-grey-custom-2 cursor-poninter hover:text-black " href="/careers">Careers</a></div></div></div></div></div></div></header><main><div class="container prose lg:prose-xl px-8 m-auto pt-16"><h3 class="pt-8 text-2xl text-black-custom-1">Mutators in react final form</h3><div class="text-gray-400 text-sm md:text-sm "><img class="inline object-cover w-8 my-0-i mr-2 rounded-full" src="/gaurav.jpeg" alt="Gaurav Singh"><span>By </span><span class="text-gray-400">Gaurav Singh</span> in <span class="text-gray-400 p-1 bg-green-50 text-custom-black-2 mr-2 rounded"><a href="/category/react">React</a></span><span class="text-gray-400 p-1 bg-green-50 text-custom-black-2 mr-2 rounded"><a href="/category/final-form">Final Form</a></span><span class="text-gray-400 p-1 bg-green-50 text-custom-black-2 mr-2 rounded"><a href="/category/javascript">JavaScript</a></span><span class="text-gray-400"> on January 27, 2022</span></div></div><article class="container prose lg:prose-xl px-8 m-auto my-4 sm:my-8 text-black-custom-1"><p><a href="https://final-form.org/react">React final form</a> provides its custom solution to manage the form state but sometimes we need to update/add the state for the fields which are not there on the form. We need to implement custom mutators for these cases. For example, if we want to submit a value but its corresponding field is not there on the form then we need to implement the custom mutator to update the state.
Let's consider the following form where we want to add <code>fullName</code> to the submitted values -</p>
<div class="remark-highlight"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span><span class="token maybe-class-name">Form</span>
onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>onSubmit<span class="token punctuation">}</span>
render<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>form<span class="token punctuation">,</span> handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span><span class="token punctuation">(</span>
<span class="token operator"><</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>label<span class="token operator">></span><span class="token maybe-class-name">First</span> <span class="token maybe-class-name">Name</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
<span class="token operator"><</span><span class="token maybe-class-name">Field</span>
name<span class="token operator">=</span><span class="token string">"firstName"</span>
component<span class="token operator">=</span><span class="token string">"input"</span>
type<span class="token operator">=</span><span class="token string">"text"</span>
placeholder<span class="token operator">=</span><span class="token string">"First Name"</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>label<span class="token operator">></span><span class="token maybe-class-name">Last</span> <span class="token maybe-class-name">Name</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
<span class="token operator"><</span><span class="token maybe-class-name">Field</span>
name<span class="token operator">=</span><span class="token string">"lastName"</span>
component<span class="token operator">=</span><span class="token string">"input"</span>
type<span class="token operator">=</span><span class="token string">"text"</span>
placeholder<span class="token operator">=</span><span class="token string">"Last Name"</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"submit"</span> disabled<span class="token operator">=</span><span class="token punctuation">{</span>submitting <span class="token operator">||</span> pristine<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token maybe-class-name">Submit</span>
<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div>
<p>When we submit the form following values get submitted -</p>
<div class="remark-highlight"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token string">"firstName"</span><span class="token operator">:</span> <span class="token string">"First"</span><span class="token punctuation">,</span>
<span class="token string">"lastName"</span><span class="token operator">:</span> <span class="token string">"Last"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div>
<p>If we want to add more field to form state then we need to define a custom mutator <code>setFormAttribute</code> to update the form. We can extract this function in some utils also which can be used with multiple forms.</p>
<div class="remark-highlight"><pre class="language-javascript"><code><span class="token operator"><</span><span class="token maybe-class-name">Form</span>
onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>onSubmit<span class="token punctuation">}</span>
mutators<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
<span class="token function-variable function">setFormAttribute</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>fieldName<span class="token punctuation">,</span> fieldVal<span class="token punctuation">]</span><span class="token punctuation">,</span> state<span class="token punctuation">,</span> <span class="token punctuation">{</span> changeValue <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token function">changeValue</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> fieldName<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> fieldVal<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
</code></pre></div>
<p>And now we can use this using <code>form.mutators.setFormAttribute</code>.</p>
<p>Now, let's say we want to submit the <code>fullName</code> without adding the <code>fullName</code> field to the form. We need to add an event handler to the <code><Field></code> element and call the mutator inside the component.</p>
<div class="remark-highlight"><pre class="language-javascript"><code><span class="token operator"><</span><span class="token maybe-class-name">Field</span>
name<span class="token operator">=</span><span class="token string">"firstName"</span>
component<span class="token operator">=</span><span class="token string">"input"</span>
type<span class="token operator">=</span><span class="token string">"text"</span>
placeholder<span class="token operator">=</span><span class="token string">"First Name"</span>
<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> input<span class="token punctuation">,</span> meta <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>input
<span class="token punctuation">{</span><span class="token spread operator">...</span>input<span class="token punctuation">}</span>
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// we will discuss event handling in upcoming articles.</span>
input<span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//final-form's onChange</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>handleChange<span class="token punctuation">)</span> <span class="token punctuation">{</span>
form<span class="token punctuation">.</span><span class="token property-access">mutators</span><span class="token punctuation">.</span><span class="token method function property-access">setFormAttribute</span><span class="token punctuation">(</span><span class="token string">"fullName"</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>values<span class="token punctuation">.</span><span class="token property-access">firstName</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>values<span class="token punctuation">.</span><span class="token property-access">lastName</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">Field</span><span class="token operator">></span>
</code></pre></div>
<p>Making custom changes in the React final form can be a bit overwhelming at times :). That's why we've added the complete demo of the component below. Do check it out.</p>
<p>Demo: <a href="https://codesandbox.io/s/affectionate-goldstine-0csfv">https://codesandbox.io/s/affectionate-goldstine-0csfv</a></p>
<p>NPM Package: <a href="https://www.npmjs.com/package/react-final-form">React Final Form</a></p>
<p>You can connect with us on <a href="https://twitter.com/dtreelabs">Twitter</a> for your feedback or suggestions.</p>
</article><div class="text-center mb-6"><div><a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Mutators%20in%20react%20final%20form%0Afrom%20@DTreeLabs&url=https://dtreelabs.com/blog/react-final-form-mutators" target="_blank" rel="noopener noreferrer" aria-label="Share on Twitter"><div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"></path></svg></div>Share on Twitter</div></a><a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=https://dtreelabs.com/blog/react-final-form-mutators&title=Mutators%20in%20react%20final%20form&summary=Mutators%20in%20react%20final%20form&source=https://dtreelabs.com/blog/react-final-form-mutators" target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn"><div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"></path></svg></div>Share on LinkedIn</div></a><a class="resp-sharing-button__link" href="https://reddit.com/submit/?url=https://dtreelabs.com/blog/react-final-form-mutators&resubmit=true&title=Mutators%20in%20react%20final%20form" target="_blank" rel="noopener noreferrer" aria-label="Share on Reddit"><div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z"></path></svg></div>Share on Reddit</div></a><a class="resp-sharing-button__link" href="https://news.ycombinator.com/submitlink?u=https://dtreelabs.com/blog/react-final-form-mutators&t=Mutators%20in%20react%20final%20form" target="_blank" rel="noopener noreferrer" aria-label="Share on Hacker News"><div class="resp-sharing-button resp-sharing-button--hackernews resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><path fill-rule="evenodd" d="M60.94 82.314L17 0h20.08l25.85 52.093c.397.927.86 1.888 1.39 2.883.53.994.995 2.02 1.393 3.08.265.4.463.764.596 1.095.13.334.262.63.395.898.662 1.325 1.26 2.618 1.79 3.877.53 1.26.993 2.42 1.39 3.48 1.06-2.254 2.22-4.673 3.48-7.258 1.26-2.585 2.552-5.27 3.877-8.052L103.49 0h18.69L77.84 83.308v53.087h-16.9v-54.08z"></path></svg></div>Share on Hacker News</div></a></div></div></main><footer class="border-t"><div class="text-grey-custom-2 font-light text-sm my-6 text-center">Copyright © 2022 DTreeLabs, LLP</div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"react-final-form-mutators","meta":{"title":"Mutators in react final form","date":"27-01-2022","author":"gaurav","description":"React final form provides out of the box solution to manage the form values but sometimes we need custom mutators to update the form state.","slug":"react-final-form-mutators","tags":["React","Final Form","JavaScript"],"cardImage":"react-final-forma-mutators.png"},"content":"\u003cp\u003e\u003ca href=\"https://final-form.org/react\"\u003eReact final form\u003c/a\u003e provides its custom solution to manage the form state but sometimes we need to update/add the state for the fields which are not there on the form. We need to implement custom mutators for these cases. For example, if we want to submit a value but its corresponding field is not there on the form then we need to implement the custom mutator to update the state.\nLet's consider the following form where we want to add \u003ccode\u003efullName\u003c/code\u003e to the submitted values -\u003c/p\u003e\n\u003cdiv class=\"remark-highlight\"\u003e\u003cpre class=\"language-javascript\"\u003e\u003ccode\u003e\u003cspan class=\"token keyword\"\u003econst\u003c/span\u003e \u003cspan class=\"token function-variable function\"\u003e\u003cspan class=\"token maybe-class-name\"\u003eApp\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token operator\"\u003e=\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token keyword\"\u003ereturn\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eForm\u003c/span\u003e\n onSubmit\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003eonSubmit\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n render\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token parameter\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003eform\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e handleSubmit\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token keyword\"\u003ereturn\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003eform onSubmit\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003ehandleSubmit\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003elabel\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eFirst\u003c/span\u003e \u003cspan class=\"token maybe-class-name\"\u003eName\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token operator\"\u003e/\u003c/span\u003elabel\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eField\u003c/span\u003e\n name\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"firstName\"\u003c/span\u003e\n component\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"input\"\u003c/span\u003e\n type\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"text\"\u003c/span\u003e\n placeholder\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"First Name\"\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003elabel\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eLast\u003c/span\u003e \u003cspan class=\"token maybe-class-name\"\u003eName\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token operator\"\u003e/\u003c/span\u003elabel\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eField\u003c/span\u003e\n name\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"lastName\"\u003c/span\u003e\n component\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"input\"\u003c/span\u003e\n type\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"text\"\u003c/span\u003e\n placeholder\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"Last Name\"\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003ebutton type\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"submit\"\u003c/span\u003e disabled\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003esubmitting \u003cspan class=\"token operator\"\u003e||\u003c/span\u003e pristine\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token maybe-class-name\"\u003eSubmit\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token operator\"\u003e/\u003c/span\u003ebutton\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token operator\"\u003e/\u003c/span\u003eform\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp\u003eWhen we submit the form following values get submitted -\u003c/p\u003e\n\u003cdiv class=\"remark-highlight\"\u003e\u003cpre class=\"language-javascript\"\u003e\u003ccode\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token string\"\u003e\"firstName\"\u003c/span\u003e\u003cspan class=\"token operator\"\u003e:\u003c/span\u003e \u003cspan class=\"token string\"\u003e\"First\"\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e\n \u003cspan class=\"token string\"\u003e\"lastName\"\u003c/span\u003e\u003cspan class=\"token operator\"\u003e:\u003c/span\u003e \u003cspan class=\"token string\"\u003e\"Last\"\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e\n\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp\u003eIf we want to add more field to form state then we need to define a custom mutator \u003ccode\u003esetFormAttribute\u003c/code\u003e to update the form. We can extract this function in some utils also which can be used with multiple forms.\u003c/p\u003e\n\u003cdiv class=\"remark-highlight\"\u003e\u003cpre class=\"language-javascript\"\u003e\u003ccode\u003e\u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eForm\u003c/span\u003e\n onSubmit\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003eonSubmit\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n mutators\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token function-variable function\"\u003esetFormAttribute\u003c/span\u003e\u003cspan class=\"token operator\"\u003e:\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token parameter\"\u003e\u003cspan class=\"token punctuation\"\u003e[\u003c/span\u003efieldName\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e fieldVal\u003cspan class=\"token punctuation\"\u003e]\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e state\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e changeValue \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token function\"\u003echangeValue\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003estate\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e fieldName\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e fieldVal\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n\u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp\u003eAnd now we can use this using \u003ccode\u003eform.mutators.setFormAttribute\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eNow, let's say we want to submit the \u003ccode\u003efullName\u003c/code\u003e without adding the \u003ccode\u003efullName\u003c/code\u003e field to the form. We need to add an event handler to the \u003ccode\u003e\u0026#x3C;Field\u003e\u003c/code\u003e element and call the mutator inside the component.\u003c/p\u003e\n\u003cdiv class=\"remark-highlight\"\u003e\u003cpre class=\"language-javascript\"\u003e\u003ccode\u003e\u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eField\u003c/span\u003e\n name\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"firstName\"\u003c/span\u003e\n component\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"input\"\u003c/span\u003e\n type\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"text\"\u003c/span\u003e\n placeholder\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"First Name\"\u003c/span\u003e\n\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token parameter\"\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e input\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e meta \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token keyword\"\u003ereturn\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003einput\n \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token spread operator\"\u003e...\u003c/span\u003einput\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n onChange\u003cspan class=\"token operator\"\u003e=\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token parameter\"\u003ee\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token arrow operator\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n \u003cspan class=\"token comment\"\u003e// we will discuss event handling in upcoming articles.\u003c/span\u003e\n input\u003cspan class=\"token punctuation\"\u003e.\u003c/span\u003e\u003cspan class=\"token method function property-access\"\u003eonChange\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003ee\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e \u003cspan class=\"token comment\"\u003e//final-form's onChange\u003c/span\u003e\n \u003cspan class=\"token keyword\"\u003eif\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003ehandleChange\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n form\u003cspan class=\"token punctuation\"\u003e.\u003c/span\u003e\u003cspan class=\"token property-access\"\u003emutators\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e.\u003c/span\u003e\u003cspan class=\"token method function property-access\"\u003esetFormAttribute\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e(\u003c/span\u003e\u003cspan class=\"token string\"\u003e\"fullName\"\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e,\u003c/span\u003e \u003cspan class=\"token template-string\"\u003e\u003cspan class=\"token template-punctuation string\"\u003e`\u003c/span\u003e\u003cspan class=\"token interpolation\"\u003e\u003cspan class=\"token interpolation-punctuation punctuation\"\u003e${\u003c/span\u003evalues\u003cspan class=\"token punctuation\"\u003e.\u003c/span\u003e\u003cspan class=\"token property-access\"\u003efirstName\u003c/span\u003e\u003cspan class=\"token interpolation-punctuation punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token string\"\u003e \u003c/span\u003e\u003cspan class=\"token interpolation\"\u003e\u003cspan class=\"token interpolation-punctuation punctuation\"\u003e${\u003c/span\u003evalues\u003cspan class=\"token punctuation\"\u003e.\u003c/span\u003e\u003cspan class=\"token property-access\"\u003elastName\u003c/span\u003e\u003cspan class=\"token interpolation-punctuation punctuation\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token template-punctuation string\"\u003e`\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n \u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e)\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n\u003cspan class=\"token operator\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"token operator\"\u003e/\u003c/span\u003e\u003cspan class=\"token maybe-class-name\"\u003eField\u003c/span\u003e\u003cspan class=\"token operator\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp\u003eMaking custom changes in the React final form can be a bit overwhelming at times :). That's why we've added the complete demo of the component below. Do check it out.\u003c/p\u003e\n\u003cp\u003eDemo: \u003ca href=\"https://codesandbox.io/s/affectionate-goldstine-0csfv\"\u003ehttps://codesandbox.io/s/affectionate-goldstine-0csfv\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eNPM Package: \u003ca href=\"https://www.npmjs.com/package/react-final-form\"\u003eReact Final Form\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eYou can connect with us on \u003ca href=\"https://twitter.com/dtreelabs\"\u003eTwitter\u003c/a\u003e for your feedback or suggestions.\u003c/p\u003e\n"},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"react-final-form-mutators"},"buildId":"GYlJMcH42Vdrf_N6ui25C","isFallback":false,"gsp":true,"scriptLoader":[]}</script><next-route-announcer><p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;"></p></next-route-announcer><script src="/_next/static/chunks/pages/category/%5Bslug%5D-1f72cbb0de358371.js"></script><script src="/_next/static/chunks/685-966e7fcee0439c8e.js"></script><script src="/_next/static/chunks/pages/careers-88fca4497873c0c8.js"></script><script src="/_next/static/chunks/pages/blog-1618d186180e6c9b.js"></script><script src="/_next/static/chunks/115-d26dfb48578df29d.js"></script><script src="/_next/static/chunks/pages/index-dfdfc92f9e2a4d41.js"></script></body></html>