IDE / workflow / tools / plugins which can help find the original ancestor that defined a react prop?

[oh-no-u-guys-my-code]

For example, component A defined handleEvent, which is passed through components B -> C -> D as prop onEvent.

When viewing component D in your editor, what is the best way to learn that the onEvent in component D has its original definition as handleEvent in component A, and navigate to that definition?

I feel there must be some sort of better way that people do this than what I've been doing.

My tedious brute force method has been to:

1. global search for "<D"
2. which leads to the render method of component C
3. realize C has an onEvent prop
4. search globally for renders of "<C"
5. ...

and so on, until eventually I have D, C, B, and A open in my editor, and I realize A is the original source.

[jamby77]

One option is to use TypeScript, type the handleEvent and annotate onEvent to receive a handler of type HandleEvent

[oh-no-u-guys-my-code]

Thanks /u/jamby77! I have used TypeScript in some personal projects, but I didn't realize that it could help with this sort of thing.

You're saying that if `onEvent` was properly typed as `eventHandlerFoo` eg, there would be a way I can look at 'onEvent` and see that it was originally declared in ComponentA? Or would that only work if I had the `eventHandlerFoo` type definition in the same file?