Ad

How To Update Props When Switching Between Child Components

- 1 answer

Currently I am working on project where we are working on the transition from AngularJs to React, but I am come a cross a problem which I am unable to solve. The problem is as follows:

I have parent component which shows all the users. The parent component refers to multiple child components (edit user, orders of user, activity of the user, etc), but when I change the between users the props in the child component hasn't changed and it still shows the previous user.

Example.

Click on User A - click on edit user (works fine).

Click on User B - click on edit user (shows props from User A).

I have looked at the documentation, but I am unable to find a suitable solution. I cam across the following article from the React documentation: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component

It says that a possible solution is to at a key to your component. The props will update when the key has updated. This solution would have worked if I only had 1 child component. Unfortunately this is not the case.

This is the code for the child components:

{isSelected ? <IndividualModalComponent onClose={() => setShowEditDialog(false)} isDialogOpen={showEditDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualSecurityComponent onClose={() => setShowPermissionDialog(false)} isDialogOpen={showPermissionDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualPasswordComponent onClose={() => setShowPasswordDialog(false)} isDialogOpen={showPasswordDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualTwoFactorComponent onClose={() => setShowTwoFactorDialog(false)} isDialogOpen={showTwoFactorDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualSessionComponent onClose={() => setShowSessionDialog(false)} isDialogOpen={showSessionDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualOrderComponent onClose={() => setShowOrderDialog(false)} isDialogOpen={showOrderDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}

When using the code shown above I am getting the following error:

backend.js:6 Warning: Encountered two children with the same key, `48097be2-84c2-4a29-acdc-87e57ba88428`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behaviour is unsupported and could change in a future version.

This is because I use the same key for multiple components.

I would like to be able to switch between users where the props also change. Is there a way to do this?

Ad

Answer

First of all, put the selectedIndividual in the state, and when you click on edit user, update the selectedIndividual state to match the user that you clicked and in that case, the props from all the children should be updated directly.

If you put the individual props of any child in the child's state, you should update that once the props has changed. One way to solve this is by implementing componentDidUpdate. Second way is to update the key props of the children. Third way is implementing getDerivedStateFromProps.

To resolve the error in the console with regards to the key, I suggest you put a different prefix in every child, for example:

<IndividualModalComponent key={`modal${selectedIndividual.id}`} {...otherProps} />
<IndividualSecurityComponent key={`security${selectedIndividual.id}`} {...otherProps} />

I hope this answers your question.

Ad
source: stackoverflow.com
Ad