0

How to do this easily ? I uses Angular so I don't usually think about this problem as Angular does it automatically. in Angular, I can pass a variable from controller down to any "children" directive in any depth, and when that variable is changed, it permeates in all directives and controller who use it.

In React however, one must use callback which is then passed through layers of React component: passing data from child to parent component - react - via callback function.

I use the above solution to pass a single variable through 3 different React components :

APP --> TABLE --> ROW_TABLE

EDIT: It is not that I don't understand how to pass the variable through layers of component. I just think there must be more easier way to do this.

I think this solution is quite complicated. Keep in mind that we usually deal with more than three "components" in the real life. Can someone give me suggestion of how to do this 'right' ?

I'm just learn React for a day now so I must miss something. Thank you

DennyHiu
  • 4,861
  • 8
  • 48
  • 80
  • If you have multiple levels of component then you should consider using `redux`. You can connect any component with redux store and can avoid passing it to each level. – Prakash Sharma Jan 14 '18 at 11:42
  • Possible duplicate of [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) – Siya Mzam Jan 14 '18 at 11:46
  • @brandNew It is not that I don't understand how to pass the variable through layers of component. I just think there must be more easier way to do this. Do you know ? Would you help me ? – DennyHiu Jan 14 '18 at 11:50
  • @Prakashsharma so that's what the `redux` is for... Thank you, I'll try it out. – DennyHiu Jan 14 '18 at 11:52
  • Easier than which way? – Siya Mzam Jan 14 '18 at 11:54
  • You can achieve the same thing using refs but it is by no means the easier way. There other way is pass parent props to the child. This is a recommended pattern. Also if you want a child to communicate grandparent, simply lift the Props to the grandparent and do the same. – Siya Mzam Jan 14 '18 at 11:58
  • @brandNew do you know easier way to pass a variable or more through bunch of component without passing callback through them ? – DennyHiu Jan 14 '18 at 11:58
  • No! There is no "easier" way to do this. Like I said, other ways involve refs. Some involve event listeners and portals. The way you are not looking for, is the one that is encouraged. – Siya Mzam Jan 14 '18 at 12:15

1 Answers1

0

If you want to pass a variable through many childs, the most correct way of doing it in React is just passing them through props.

If you don't want to use this aproach you could use state management libraries like redux.

If you want instead to do this using pure React you could use the component's context, although it is not recommended.

See more about context here https://reactjs.org/docs/context.html

Carlo
  • 642
  • 1
  • 5
  • 16
  • The problem with `props` is that it assigned a value one-way and only once. If you make any changes in the 'child' component, The parent component won't know. I'm an Angular developer so I'll definitely try `redux` ASAP. Thank you! – DennyHiu Jan 14 '18 at 13:40
  • 1
    @DennyHiu That's why the state has to be in the grandparent component which will pass down handlers for a change in the child component. If that handler is called the grandparent changes state which will lead to new props for it's children. If you find yourself having many components depending on a parent very high up the tree you should use `redux`. – trixn Jan 14 '18 at 13:45