Using the example for calculated fields:

```js
import React from 'react'
import { render } from 'react-dom'
import Styles from './Styles'
import { Form, Field, FormSpy } from 'react-final-form'
import createDecorator from 'final-form-calculate'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
await sleep(300)
window.alert(JSON.stringify(values, 0, 2))
}

const calculator = createDecorator(
{
field: 'minimum', // when minimum changes...
updates: {
// ...update maximum to the result of this function
maximum: (minimumValue, allValues) =>
Math.max(minimumValue || 0, allValues.maximum || 0)
}
},
{
field: 'maximum', // when maximum changes...
updates: {
// update minimum to the result of this function
minimum: (maximumValue, allValues) =>
Math.min(maximumValue || 0, allValues.minimum || 0)
}
},
{
field: /day\[\d\]/, // when a field matching this pattern changes...
updates: {
// ...update the total to the result of this function
total: (ignoredValue, allValues) =>
(allValues.day || [])
.reduce((sum, value) => sum + Number(value || 0), 0)
}
}
)

const App = () => (

🏁 React Final Form Example

Calculated Fields

Read Docs

Change the minimum and maximum values with the arrow keys and notice that
the other updates so that minimum is always <= maximum.

As you enter numbers for each day of the week, the total is calulated in
realtime.

(

---

---

---

{JSON.stringify(values, 0, 2)}

} />

)}
/>

)

render(, document.getElementById('root'))
```

This will not cause the calculated field to have the correct value.