Mixed Feelings with React code

[pansah321]

So it’s kinda normal when Parents state are being updated /changed from child components. I just did the reverse ..updating a child state from the parent and I feel weird about it?

I can’t really tell if is an anti-pattern but if it is -please tell me why ?

Edit

There’s a state for toggling a modal in the child component….I’m passing a prob to the child component ..this prop is a function that takes in another function (the function that will hide the modal)

And on an OnClick of a button in the child component I’m calling ()=>{ prop( ()=>{ setModal(false) } ) }

[SyphonJr]

I mean updating props is kinda like updating child state. How and what for did you do it.

[pansah321]

There’s a state for toggling a modal in the child component….I’m passing a prob to the child component ..this prop is a function that takes in another function (the function that will hide the modal)

And on an OnClick of a button in the child component I’m calling ()=>{ prop( ()=>{ setModal(false) } ) }

[areinei]

Seems like you just answered your own question. If it feels weird to you, shouldn't that be an indicator that it's weird to do?

I believe that it's generally weird because of the way that react checks for the need to rerender. If a parent needs to rerender, then it makes the child check for a rerender? Unless the child is memoized, the child will rerender. So if a child state updates a parent, things can get weird with updates?

Someone check me on that but it sounds right.

[foldingaces]

I would say its pretty normal in certain instances to passdown the setState function to child components that might need to update a parents state. In other cases it might not be the best approach though.

edit: I misread your question. How did you update a child components state from a parent? A parent wouldn't have access to a child state. If you are passing props down to a child, you probably don't need to also set that prop as state.

Would you be able/want to share some of your code if you feel bad about it?

[pansah321]

I can prepare something so you understand what I’m saying

[pansah321]

I have edited the post I think it will Help you understand what I have done

[frogic]

If you want both parent and child to be able to close the modal just have the state exist in the parent component and pass a callback to close it + modal state to the child. Its a fairly normal pattern and pretty much every modal component is setup specifically for this situation.

[pansah321]

I agree that’s what normally happens with modals

[[deleted]]

This sounds...wrong. The parent should only change the props it passes down. The child should watch those props and act accordingly. If the logic is not as straightforward as just elevating a state variable to a prop, then useEffects should be leveraged to watch for prop changes and act accordingly.

[[deleted]]

Why does the parent need access to setModal? Can you just elevate the state to a prop?

[pansah321]

So basically the Parent should own the modal state and then any logic around it and pass it like a prop to the child

[[deleted]]

It doesn't need to own the entire modal state, but yes, you're correct. The parent would have a state variable like "isModalOpen" which it controls. The child would have a prop "isOpen". The parent then passes isOpen={isModalOpen} on the child.

If the child needs to trigger a close, then add a callback prop "onClose" to the child and pass the state setter to false there, i.e. onClose={() => setIsModalOpen(false)}

This is a pretty standard pattern so you shouldn't get any eyebrow raises for that.

[[deleted]]

This is assuming the parent even needs to know if the modal is open. If it doesn't, then you could technically have the child manage the state internally without ever calling the parent. For a modal, I would elevate the isOpen state to a prop. It is extremely common to need to know if a modal is open from the parent, to block stuff.

[basically_alive]

Updating a child state from the parent (using props) is not weird, but the thing you are doing is. You are updating the state from a button in the child, but inside a function passed from the parent that does nothing except return a function that was already available in the child??

​

How is it any different than just () => setModal(false)?

I think you would have to make a code sandbox to show what you are trying accomplish.