I need help with handling state changes coming from another component

[andreiwow2]

I tried creating a Confirmation Dialog that will be shown to the user.

It works with static data, but if I want to get user input for example, state won't re-render the data in portal.

If I create some JSX code with state too, for example a controlled input. Then pass this state to my function and create a portal with that JSX, when I type in the controlled input, state updates but component from Portal does not re-render to reflect the updated state.

It works only if the state is inside the Portal's component, if passed as props, it won't re-render

Here is my custom hook that displays the dialog and then waits for the user to press yes or no in the dialog.

https://gist.github.com/andreiwow2/4739fe71c3d98b612c13db6c10068a3c

[KelechiOdom10]

Did you ever find a solution to this problem? Currently running into the same issue

[sahiljena]

@andreiwow2 @KelechiOdom10 did you guys find any solution to this?

[andreiwow2]

@andreiwow2 @KelechiOdom10 did you guys find any solution to this?

Since that was a while ago, and even my snippet doesn't exist anymore, I don't remember exactly the use case, but lately I improved my coding style and didn't encounter this issue anymore, so it was mostly a bad approach what I did back then

I keep the state inside the portal too, I don't try to update a state that isn't inside the portal

[sahiljena]

@andreiwow2 @KelechiOdom10 did you guys find any solution to this?

Since that was a while ago, and even my snippet doesn't exist anymore, I don't remember exactly the use case, but lately I improved my coding style and didn't encounter this issue anymore, so it was mostly a bad approach what I did back then

I keep the state inside the portal too, I don't try to update a state that isn't inside the portal

Actually currently in my use case, I have multiple drawers, so I'm trying to build a common sheet, which will just accept children, its props and sheet props. But the problem i'm facing is, if send some states to my children it will update but the updated values are not reflected inside the children. Do i need maintain another state inside the children component as well? @gorhom can you help in here?

[andreiwow2]

@andreiwow2 @KelechiOdom10 did you guys find any solution to this?

Since that was a while ago, and even my snippet doesn't exist anymore, I don't remember exactly the use case, but lately I improved my coding style and didn't encounter this issue anymore, so it was mostly a bad approach what I did back then

I keep the state inside the portal too, I don't try to update a state that isn't inside the portal

Actually currently in my use case, I have multiple drawers, so I'm trying to build a common sheet, which will just accept children, its props and sheet props. But the problem i'm facing is, if send some states to my children it will update but the updated values are not reflected inside the children. Do i need maintain another state inside the children component as well? @gorhom can you help in here?

You will probably need to move the state inside those children, or wrap them with another component and make sure the state is inside the component that goes through the children prop, so it is inside the portal.

If you later need the data from it you could implement some other logic to return the data, like for example, in the case of a form, the states would be in the portal themselves too, and you'd return the data when the user clicks submit

[sahiljena]

@andreiwow2 @KelechiOdom10 did you guys find any solution to this?

Since that was a while ago, and even my snippet doesn't exist anymore, I don't remember exactly the use case, but lately I improved my coding style and didn't encounter this issue anymore, so it was mostly a bad approach what I did back then I keep the state inside the portal too, I don't try to update a state that isn't inside the portal

Actually currently in my use case, I have multiple drawers, so I'm trying to build a common sheet, which will just accept children, its props and sheet props. But the problem i'm facing is, if send some states to my children it will update but the updated values are not reflected inside the children. Do i need maintain another state inside the children component as well? @gorhom can you help in here?

You will probably need to move the state inside those children, or wrap them with another component and make sure the state is inside the component that goes through the children prop, so it is inside the portal.

If you later need the data from it you could implement some other logic to return the data, like for example, in the case of a form, the states would be in the portal themselves too, and you'd return the data when the user clicks submit

Makes sense, thanks!!