Let's say I have multiple layers of composition:
const ComponentA = ({ firstProp, secondProp }) => {
reutrn <div>Component A</div>
}
const ComponentB = ({ thirdProp, fourthProp }) => {
reutrn <ComponentA
firstProp='first prop'
secondProp='second prop'
/>
}
const ComponentC = ({ fifthProp }) => {
return <ComponentB
thirdProp='third prop'
fourthProp='fourth prop'
/>
}
Now I have given an instance of ComponentC and I want to access all of the props in the compositional hierarchy.
How can I do that?
Update
To clarify more, I'm talking about reflection.
I have been given an instance of ComponentC and I want to find out its props using componentCInstance.props and then find out the props of the ComponentB from that componentCInstance etc.
Short answer: you can't access all props at Component C this way.
Solution 1: If Component C is the source of all props, you need to define them there, and pass down the component tree
Solution 2: If your hierarchy is too long, consider using Context (https://reactjs.org/docs/hooks-reference.html#usecontext).
Solution 3: If your props are independent from Component C and are part of application state, consider using a state management tool (for example https://redux.js.org/)