final-form / final-form-calculate

Decorator for calculating field values based on other field values in 🏁 Final Form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

update is not a function

crobinson42 opened this issue · comments

Are you submitting a bug report or a feature request?

bug

What is the current behavior?

I have many working <Form /> components in a react-native (v0.60) app - as soon as I add decorators prop to Form, i get this error, "update is not a function":

decorators={[
            createDecorator({
              field: 'department', // when the value of department changes...
              updates: {
                // ...set field value
                subDepartment: -1,
              },
            }),
          ]}

What is the expected behavior?

For the decorators to work as expected.

What's your environment?

"final-form": "^4.18.1",
"final-form-calculate": "^1.3.1",
"final-form": "^4.18.1",
"final-form-calculate": "^1.3.1",

Other information

Looks to be the culprit here, but not sure why:

const result = update(next, values, previousValues)

The stack trace only points to the line where <Form /> is declared in the error:

Screenshot 2019-07-26 06 45 25

Here is a simple reproducible code snippet one could paste into the App.js file with a new react-native init rffDemo project from the cli:

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import createDecorator from 'final-form-calculate';
import { Field, Form } from 'react-final-form';

export default class App extends Component {
  render() {
    return (
      <Form
        onSubmit={() => {}}
        decorators={[
          createDecorator({
            field: 'name', // when the value of department changes...
            updates: {
              // ...set field value
              last: 'something',
            },
          }),
        ]}
        render={({ handleSubmit }) => (
          <View>
            <Field
              name="name"
              render={({ input }) => (
                <TextInput value={input.value} onChangeText={input.onChange} />
              )}
            />
          </View>
        )}
      />
    );
  }
}

I'm a tard. I was copy-pasting an old codesandbox from erikras and not using the latest API for final-form-calculate :-(

I need to pass a function to the field i'm updating.