Get id of new FieldArray item immediately after append

[BrendanC23]

I have a field array and state that represents the item that is currently selected. When I append a new item, I would like to set the selected item to the new item. However, fieldArray.append() does not take effect until the next render and does not return the new id.

Here's an example:

function Component() {
    const form = useForm();
    const fieldArray  = useFieldArray({ control: form.control, name: "name" });
    const [selectedItem, setSelectedItem] = useState<string | null>(null);

    return (
        <button onClick={() => {
            fieldArray.append();
            setSelectedItem(); // What goes here?
        }}>Add Item</button>
    );
}

I could do something like

useEffect(() => {
    setSelectedItem(fieldArray.fields[fieldArray.fields.length - 1].id);
}, [fieldArray.length]);

but this triggers when a field is deleted and doesn't work for methods other than append (prepend() or insert).

[tatsmaki]

You can either do

fieldArray.append({ value: 123, selected: true })

or

fieldArray.append({ value: 123 })
setSelectedItem(123)

and when you render fields check if field.selected is true or compare selectedItem === field.value