React：使用 FieldArray 方法更改多步表单中的值

Question

I've a multi step form made with react-final-form that makes use of FieldArray . The end user can add X number of typologies of rooms, and according to that number the next step will generate arrays of rooms.

Here's a live demo - codesandbox

Now when it comes to the second step (the rooms configuration) I need to set default values in an ongoing process: when the user choose a max number of adults the value of max children should be setted that number minus 1.

I'm using <OnChange> component inside the FieldArray (calling the fields.update() method).
It works but the problem is that it changes all the values inside the object. You can check this behaviour on the demo above.

I can't figure out what's wrong.

Thanks in advance for any help.

Answer 1

First of all, beautiful form! You were very close. I've moved the <OnChange/> component into RoomRow and used a <Field/> to get the onChange for the max_children field.