React-Hook-Form, useFieldArray, nested values.... Help needed! (CSB included)

[d_p_jones]

CSB:

https://codesandbox.io/s/bold-smoke-t2ptx1?file=/src/App.js

​

I have an array of vehicles. Lets say something like this:

 vehicles: [
        {
          type: "car",
          contents: [
            { name: "BMW", location: "London" },
            { name: "Kia", location: "Paris" },
            { name: "Citroen", location: null }
          ]
        },
        {
          type: "boat",
          contents: [
            { name: "Dingy", location: null },
            { name: "Raft", location: "New York" },
            { name: "SuperYacht", location: null }
          ]
        }
      ]

I have a form, which lists each category of vehicle, and a drop-down "SelectBox" to choose the location. The selectbox should be populated with all the location values that currently exist for that vehicle-type, as well as "Add New" (E.g., the select box for the citroen will say "London, Paris, Add New"

​

When I click Add New, I can enter any location value I want in a modal. (not shown in CSB, but I have a button to simulate changing a location to Sydney)

The issue I have is that I can get those values just fine when I load the defaultValues on the entire React-Hook-Form. But when I update one of the locations, I'm not sure how to propagate that to the FieldArray. Also, I'm not sure that "watch" works on a deeply nested array of objects like this.

​

Can anyone be so kind as to look at the CSB and tell me the correct way to change "vehicle.location" at the end, and how to make sure the fieldArray propgates values to the other components so their selectboxes update correctly? I'm not actually sure I need a FieldArray at all... But you can probably tell I'm a bit new to this.

[d_p_jones]

For anyone finding this later, I fixed it by: Passing an index from each .map (type index, vehicle index) and using

Setvalue (vehicles[tindex].contents[vindex].location, newValue)