How to update parent state without violating react

[s1n7ax]

I'm working on a POC to build dynamic form based on a deeply nested object. High level idea is, we have two types of components, GroupComponent, AtomicComponent. AtomicComponent is the smallest component while GroupComponent could contain one or more AtomicComponents or a another GroupComponents. For that I've decided to create an observable.object and allowing object mutation directly within the component itself.

This is a GroupComponent that renders a list of AtomicComponents.

https://github.com/s1n7ax/poc-react-mobx-complex-form/blob/995705bfa9fe18804ca7086d7f7e59ff1700c5ea/src/components/FieldGroup.tsx?plain=1#L18-L36

From this components, I want to update the state of the current group component as follows. If any of the child components has any errors, I want to mark the current group components hasError to true. Likewise, if any of the child components are dirty (user has interacted with the element), the component group should be marked as dirty.

https://github.com/s1n7ax/poc-react-mobx-complex-form/blob/dfd0d4ede6f46e16ca82031794231e3fb3f53a71/src/components/ChildStateBoundary.tsx?plain=1#L17-L29

This works but gets following error.

rendering::ChildStateBoundary ChildStateBoundary.tsx:19:12
Cannot update a component (`_c`) while rendering a different component (`_c`). To locate the bad setState() call inside `_c`, follow the stack trace as described in https://react.dev/link/setstate-in-render intercept-console-error.js:62:31
rendering::ChildStateBoundary ChildStateBoundary.tsx:19:12
rendering::Slider 2 Slidder.tsx:28:10
rendering::FormGroup 2 FieldGroup.tsx:19:10
rendering::ChildStateBoundary

While I understand setting it directly right in the component function body it not the way to go, I'm not quite sure how to achieve this either.

Ultimately I want to propergate the errors from very last children components to Root component through any number of components in between.

[mweststrate]

Render should indeed never be mutating data. At least an effect should be used. In this case however this seems to be pure derived data, and I recommend to either create hasError and isDirty as computed properties on the data object

…

On Tue, Nov 5, 2024 at 8:44 AM Srinesh Nisala ***@***.***> wrote: I'm working on a POC to build dynamic form based on a deeply nested object. High level idea is, we have two types of components, GroupComponent, AtomicComponent. AtomicComponent is the smallest component while GroupComponent could contain one or more AtomicComponents or a another GroupComponents. For that I've decided to create an observable.object and allowing object mutation directly within the component itself. This is a GroupComponent that renders a list of AtomicComponents. https://github.com/s1n7ax/poc-react-mobx-complex-form/blob/995705bfa9fe18804ca7086d7f7e59ff1700c5ea/src/components/FieldGroup.tsx?plain=1#L18-L36 From this components, I want to update the state of the current group component as follows. If any of the child components has any errors, I want to mark the current group components hasError to true. Likewise, if any of the child components are dirty (user has interacted with the element), the component group should be marked as dirty. https://github.com/s1n7ax/poc-react-mobx-complex-form/blob/dfd0d4ede6f46e16ca82031794231e3fb3f53a71/src/components/ChildStateBoundary.tsx?plain=1#L17-L29 This works but gets following error. rendering::ChildStateBoundary ChildStateBoundary.tsx:19:12 Cannot update a component (`_c`) while rendering a different component (`_c`). To locate the bad setState() call inside `_c`, follow the stack trace as described in https://react.dev/link/setstate-in-render intercept-console-error.js:62:31 rendering::ChildStateBoundary ChildStateBoundary.tsx:19:12 rendering::Slider 2 Slidder.tsx:28:10 rendering::FormGroup 2 FieldGroup.tsx:19:10 rendering::ChildStateBoundary screenshot.24-11-05.13.08.35.png (view on web) <https://github.com/user-attachments/assets/f61910ac-442a-4f31-bad0-c5dfcf13d223> While I understand setting it directly right in the component function body it not the way to go, I'm not quite sure how to achieve this either. Ultimately I want to propergate the errors from very last children components to Root component through any number of components in between. — Reply to this email directly, view it on GitHub <#3956>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBBLQEZNYDD2JS2BZPLZ7BZPNAVCNFSM6AAAAABRF46VDWVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXGQZDONBXGM> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[s1n7ax]

How can I do that in this case?

Examples here are using classes and I'm not quite sure how to add a computed value to properties of my object store.

https://mobx.js.org/computeds.html