[Dynamic Forms / React] No re-render component react

[gazouweb]

Hello,
I'll try to be as clear as possible about my problem.

I'm using a form with Live Component and I have two dependent lists. In this case, I'm using "Dependent Form Fields" (https://ux.symfony.com/demos/live-component/dependent-form-fields). So far, everything's working.

$builder
            ->add('name', TextType::class, [
                'label' => $options['prefix_label'].'fields.name',
            ])
            ->add('category', EntityType::class, [
                'label' => $options['prefix_label'].'fields.category',
                'placeholder' => $options['prefix_label'].'fields.category',
                'class' => Category::class,
                'required' => true,
                'query_builder' => function (EntityRepository $repository) {
                    return $repository->createQueryBuilder('category')
                        ->addOrderBy('category.name', 'asc');
                },
                'choice_attr' => function (Category $category): array {
                    return [
                        'state' => $category->getState(),
                    ];
                }
            ])
            ->addDependent('position', 'category', function (DependentField $field, ?Category $category) {
                $field->add(SortType::class, [
                    'groupSort' => 'category',
                    'groupValue' => $category,
                ]);
            })
        ;

Except that in my case, I'm using a React component that renders the lists, and everything works there too.
When I modify the value of my first list, symfony correctly returns the values for the second list and updates the "data-symfony--ux-react--react-props-value" attribute.

<div {{ react_component('Components/Select', {
        id:         id,
        name:       name,
        fullName:   full_name,
        options:    choices|arrayValues,
        value:      value,
        isError:    not valid,
        multiple:   multiple,
        disabled:   disabled,
        required:   (required
                        and placeholder is none
                        and not placeholder_in_choices
                        and not multiple
                        and (attr.size is not defined or attr.size <= 1)
        ),
        placeholder: (placeholder is not none and placeholder != '')
            ? (translation_domain is same as(false)
                ? placeholder
                : placeholder|trans({}, translation_domain))
            : null,
        translationDomain: choice_translation_domain
    }) }}></div>

However, my React component doesn't see the update to this attribute, and therefore doesn't reload my list of options.

<div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="Components/Select" data-symfony--ux-react--react-props-value="{&quot;id&quot;:&quot;range_position&quot;,&quot;name&quot;:&quot;position&quot;,&quot;fullName&quot;:&quot;range[position]&quot;,&quot;options&quot;:[{&quot;data&quot;:0,&quot;value&quot;:&quot;0&quot;,&quot;label&quot;:&quot;En premier&quot;,&quot;attr&quot;:{&quot;state&quot;:1},&quot;labelTranslationParameters&quot;:[]},{&quot;data&quot;:1,&quot;value&quot;:&quot;1&quot;,&quot;label&quot;:&quot;En dernier&quot;,&quot;attr&quot;:{&quot;state&quot;:1},&quot;labelTranslationParameters&quot;:[]}],&quot;value&quot;:&quot;0&quot;,&quot;isError&quot;:false,&quot;multiple&quot;:false,&quot;disabled&quot;:false,&quot;required&quot;:false,&quot;placeholder&quot;:&quot;S\u00e9lectionnez une position&quot;,&quot;translationDomain&quot;:false}">...</div>

Could you tell me if I've missed anything?
If you need part of my code?

Thanks

[Kocal]

Hi,

Since there is no propsValueChanged() method on the React controller, there is no way to listen props changes and re-inject them in your React component, similary to #2160

[gazouweb]

Hi,

Thanks for your reply, so there's no solution if I understand correctly?

Sorry, I'm just starting out with React :)

[Kocal]

Maybe there is a solution, but I'm not familiar enough with React to know if there is a similar (or better) solution than #2160, to update the component properties and force a re-render