CODEWITHSUNDEEP
javascriptreactjsreact-final-form
Anand
Anand

Reputation: 4551

Changing the value of nested field in react final form

we are using React Final Form library, and want to change the value of nested field on user's selection.

It is basically Address form, where on selection of Suburb, I want to change postcode and state. address is again a nested object in form. My Dataset look like :-

{
  name: 'xyzx',
  address: {
    suburb: 'xx',
  },
}

I am passing following mutator

export const changeValueMutator: Mutator = ([name]: string[], state: MutableState, { changeValue }: Tools) => {
  console.log(state, name);
  changeValue(state, name, value => (value));
};

and calling it as

this.props.changeValue('address.suburb', item.suburb);

Upvotes: 2

Views: 4486

Answers (3)

Anand
Anand

Reputation: 4551

I found the answer from one of the test case in library

I corrected it by changing my mutator method as below (take newValue as second arg in first parameter array). https://github.com/final-form/react-final-form/blob/379755c24570bf0e1cedaa2f6783e642d2e2b369/src/ReactFinalForm.d.test.tsx#L69

export const changeValueMutator: Mutator =
  ([name, newValue]: string[], state: MutableState, { changeValue }: Tools) => {
  console.log(state, name);
  changeValue(state, name, value => (newValue));
};

Upvotes: 0

Ankit
Ankit

Reputation: 990

You can try this, if

state = {
  json : {
    name: 'xyzx',
    address: {
    suburb: 'xx',
  },
}

this.state.json.address.suburb = "yy";
this.setState({json : this.state.json});

Upvotes: -4

rockingskier
rockingskier

Reputation: 9346

Nested fields in final-form are referenced with dot notation.

https://github.com/final-form/final-form#field-names

<Field
    name="address.suburb"
    component="input"
    type="text"
    placeholder="Suburb"
/>

Upvotes: 6

Related Questions