4

While I'm learning React, it's always said that you should keep your state in the parent component and pass them as props to its children.

But in the real world, whenever I start building a react app, I end up passing data from a child component to its parent.

For example, if I have to implement a form somewhere in my react app, I create an extra component for it (for example, FormComponent) and import it in my App component.

But now, I have to pass the form data form the FormComponent to the App component. In other words, from the child component (FormComponent) to the parent (App component).

And this was just an example. Usually, I always end up in situations where I have to pass data from child to parent rather than the other way around.

Do I misunderstand the concept of passing props completely? If we stay with the above example, is my approach, right?

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
user1941537
  • 6,097
  • 14
  • 52
  • 99
  • Does this answer your question? [What is the difference between state and props in React?](https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react) – Mahesh Kumaran Jul 06 '20 at 12:15
  • 1
    If I understand the context of the question correctly, I think the user is saying that he/she constantly finds himself/herself in situations where he/she needs to pass data from child to parent and not the other way. So since react is about passing data from parent to child and he/she is in need of the other way, are his/her concepts of passing props ok? Am I right? – Nafiz Ahmed Jul 06 '20 at 12:30
  • Yes Nafiz. This is exactly what I'm trying to ask. – user1941537 Jul 06 '20 at 12:32

2 Answers2

4

You can't pass data from child to parent as in React, The Data Flows Down.

So usually you pass callbacks from parent to its children, but the state remains in the parent.

This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.

If you in a situation where the code becomes unreadable, unmaintainable, you should consider Lifting the State Up.

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

Aside from it, a common anti-pattern is Prop Drilling, Context API, and many state libraries like Redux, MobX, and Recoil trying to solve such problems with some extra features.

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Does it mean that each time I use a form component in my app and use it as a child inside another component, I have to lift the state up to pass the form data to its parent component? – user1941537 Jul 06 '20 at 12:34
  • No, instead "every time" you should say "depends". If you passing too many callbacks, then yes, you need to lift the state up. – Dennis Vash Jul 06 '20 at 12:40
0

1- In your case you can pass a function ( Example: handleSubmit() ) through props from parent to child. And so when this function is called the child's data would be hundled from the parent. you can use this doc page to inspire your code.

2- Otherwise you can use react redux, and then you can hundle all data at any component in your project using one global state called redux store.
want to learn more about react redux click here.

3- Have a nice day ^_^ .

Omar Jribi
  • 89
  • 1
  • 3