how to find parent component of props

Question

how does one track the source of a component’s props that were set in another component?

I am working with only two or sometimes three components, but imagining a large application with many components, I am not sure how I would find the parent component where the props were defined and passed into the child component (assuming I am viewing the child component).

I would appreciate your help.

Have you checked [React Access parent component name](https://stackoverflow.com/questions/33474179/react-access-parent-component-name)? — Luka, Jul 21 '21 at 11:55

score 0 · Answer 1 · answered Jul 21 '21 at 11:55

0

To track the origin of props I suggest using browser extension: React Developer Tools. It offers a great interface to track, see and manipulate props from inside your developer tools.

answered Jul 21 '21 at 11:55

CoderNameIsMartin

42
5

Sure, you could do this but you're encouraging the person asking the question to prop drill which is a very bad practice. – Raythe Jul 21 '21 at 11:57
Agree, state management should be handled with appropriate tools which are 99% used in all serious React projects. Regardless dev tools are here to make developing experience easier and more controllable and one of its functionality is to preview props with an visual interface which I thought is the answer to this question. – CoderNameIsMartin Jul 21 '21 at 12:09
In the question, they mentioned `but imagining a large application with many components...`. – Raythe Jul 21 '21 at 12:10

score -1 · Answer 2 · answered Jul 21 '21 at 11:53

What you're describing is known as "Prop Drilling" or passing down props through multiple levels of components. To avoid this, there are two options I would suggest. React's Context api or Redux. Personally I like both but I would lean more towards context as it requires less code but some of the features of Redux-Saga's middleware makes it easier to respond to multiple events.

how to find parent component of props

2 Answers2