Passing data through 3rd party react components

Question

I have the following react component structure:

• MyEditor
  • Bootstrap Tabs
    • Component Grid
      • Image 1
      • Image 2
      • Image x

In the myEditor component I have a function componentSelected() which sets the state. In an app where I've written every component I just pass the componentSelected() function as a prop through the tree of components and call it from the image object.

componentSelected={this.props.componentSelected}

However, in this app I'm using a 3rd party component. Bootstrap tabs to be precise. How do I pass my componentSelected() function through the 3rd party component to it's children so they can invoke it?

This leads a separate question. Am I misunderstanding React? Can I call a function up the React component tree without passing it down to the component as a prop? If so, how?

Thanks!

Answer 1

That's correct, the convention is top-to-bottom through props , so you'd do something like in your render method in MyEditor:

<BootstrapTabs> <ComponentGrid componentSelected={this.props.componentSelected}> ... </ComponentGrid> </BootstrapTabs>

EDIT: You can absolutely add extra props to your BootstrapTabs without changing the source, but you might as well save yourself that extra level of prop-passing unless your selection action occurs at that level.