I have the following component which I’m trying to use inside a “Drinks Edit View”. In “drinks” I have nested “ingredients”, but the ingredients are also a related resource.

I want to select the ingredient from the related resource and set the nested fields (in drink) “record.ingredients[idx].name”, “record.ingredients.[idx]._id”, “record.ingredients.[idx].unit”.

But I can’t change the nested, even if I use an index [0] to test, it doesn’t work and I don’t know how to get the index too.

The way it is now, for example if I change the ingredient, the name of the Drink will be changed because the component is inside the Drink Edit View .

import {
    AutocompleteInput, ArrayInput, SimpleFormIterator, ReferenceInput, TextInput, NumberInput, BooleanInput,
    AutocompleteInputProps, FormDataConsumer,
} from 'react-admin';
import { useFormContext } from 'react-hook-form';

export const ArrayInputForIngredients = () => {
    const { setValue } = useFormContext();
    const handleIngredientChange: AutocompleteInputProps['onChange'] = (
        value,
        record
    ) => {
        setValue('name', record?.name); // NOT WORKING, CHANGES THE NAME OF THE DRINK
        setValue('unit', record?.unit);
        setValue('_id', record?._id);
    };

    return (
        <ArrayInput source="ingredients">
            <SimpleFormIterator inline >
                <ReferenceInput source="_id" reference="ingredients" >
                    <AutocompleteInput label="Ingrediente" 
                    source="_id" 
                    optionText={"name"} 
                    onChange={handleIngredientChange} />
                </ReferenceInput>
                <TextInput source="name" />
                <TextInput source="unit" />
                <BooleanInput source="decorative" />
                <BooleanInput source="optional" />
                <NumberInput source="quantity" />
            </SimpleFormIterator>
        </ArrayInput>
    )
}

The component is inside something (simplified) like this:

export const DrinksEdit = () => {
    return (
        <Edit>
        <SimpleForm>
        <TextInput source= "name" />
        <ArrayInputForIngredients />
        < /SimpleForm>
        < /Edit>
    )
};

The name and other data of the each ingredient I select in the AutoCompleteInput to change and not the name of the drink.