3

I have a parent component which has three other components, A B and C.

enter image description here

Each of these components has its own set of fields that can be saved. These are different object types. And now, when user clicks "Save", I want to trigger a save action in each of these components. Each of them has its own error handling, messaging etc.

How to handle it? At the moment I'm just using references, but according to this post (Call child method from parent) this is not encouraged. How to implement it in "React" way of thinking?

marxin
  • 3,692
  • 3
  • 31
  • 44
  • 1
    Sending a command down to a child can be done by passing a state like `actionChildA` as prop to the child, and waiting for it in the child's `componentDidUpdate()`. After the action was processed, the child should call a prop method to reset it in the parent's state: https://codesandbox.io/s/dry-bush-0ufxn?file=/src/App.js –  May 12 '20 at 17:14
  • @ChrisG it feels like its more convoluted than using refs, since it makes child component even more dependent on parent. using refs, child component doesnt need to be aware of parent component at all – marxin May 12 '20 at 17:51
  • Well, you asked for the React way :) –  May 12 '20 at 18:00
  • [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html) : Let parent own the state of its children and submit form (or take action) with that data from parent itself. – Ajeet Shah May 12 '20 at 18:06
  • @ChrisG wow, is it the react way of doing it? do you have any reference on that? Dont get me wrong I dont want to undermine what you've said, it just feels wrong to me if they suggest solving such problem in this way – marxin May 12 '20 at 18:29
  • @AjeetShah this could be a solution, but then A B and C on their own become useless. At the moment logic for saving, error handling, feedback messages etc is inside each of them so if I would want to reuse C (for example), all I need to do is to add it and call save() when needed. They are also complicated, so each of them can have long form with many fields, many potential messages etc. Having all this code in parent component would make it very very messy. – marxin May 12 '20 at 18:37
  • I guess, you have seen these: [1](https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542) or [2](https://stackoverflow.com/a/45582558/2873538): Binding parent with a child component's reference. – Ajeet Shah May 12 '20 at 18:53
  • The proper React way is to lift up state. Your question implicitly excluded that, so I told you about the alternate way, passing props. Feel free to come up with an even better way that uses 100% basic react, I'd love to hear it :) There's other ways, but they all include passing around references. My way is "pure" in that regard, if you will. –  May 12 '20 at 18:56
  • @ChrisG thats a shame. I was hoping there is some way for my parent component to "emit" an event, that childrens could listen to and perform an operation when needed. I excluded lifting the state for good reason, I dont want my parent component to become some kind of god class. thank you for help though! it is still useful to know there is no other way – marxin May 12 '20 at 20:23
  • I'm not sure why you're rejecting my solution? It's just passing props. You can write all kinds of alternatives, for instance put custom event handling in `window`, register your children as listeners, then emit the event from the parent. But why not simply... pass some props. –  May 12 '20 at 20:50

0 Answers0