ffxsam
ffxsam

Reputation: 27713

How to pass a prop to all children and grandchildren of a certain type

I'd like to have a parent component that has the ability to find all descendents of a certain React class type, and pass it a prop. So given a structure like this:

<Parent>
  <div>
    <em>
      <GimmeProps />
    </em>
  </div>
  <GimmeProps />
</Parent>

The componentDidMount method of Parent would be able to find all the <GimmeProps> elements and set them as such:

<GimmeProps magic={this.callback} />

How would I do this? I already tried using React.Children.forEach recursively, but I can't tell the React class type, and I don't think I can set props that way.

Upvotes: 3

Views: 665

Answers (1)

Ajaco
Ajaco

Reputation: 369

I believe what you're looking for is context, not props. Context behaves in many ways just like props, but they are being passed from a component to all their children and grandchildren.

They can be accessed inside children using this.context.foo

Here's a blogpost explaining how to use props: https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

Official react documentation for context: https://facebook.github.io/react/docs/context.html

Upvotes: 1

Related Questions