The use case is I would like to "effortlessly" pass down a certain prop values to all descendant ponents. Not sure if this is even possible in React.

So instead of doing this:

class Parent extends Component {
    constructor() {
        super(props);
        this.propsponentID = "123456";
    }
    render() {
        return <Child1 ponentID={this.propsponentID} />
    }
}

class Child1 extends Component {

    render() {
        return <Child2 ponentID={this.propsponentID} />
    }
}

class Child2 extends Component {

    render() {
        return <div>{this.propsponentID}</div>
    }
}

Do something like this:

class Parent extends Component {
    constructor() {
        this.propsponentID = "123456";
    }

    passComponentIDToAllDescendantComponents() {
        // Some super nifty code
    }

    render() {
        return <Child1 />
    }
}

// etc...

Thanks for the help

The use case is I would like to "effortlessly" pass down a certain prop values to all descendant ponents. Not sure if this is even possible in React.

So instead of doing this:

class Parent extends Component {
    constructor() {
        super(props);
        this.props.ponentID = "123456";
    }
    render() {
        return <Child1 ponentID={this.props.ponentID} />
    }
}

class Child1 extends Component {

    render() {
        return <Child2 ponentID={this.props.ponentID} />
    }
}

class Child2 extends Component {

    render() {
        return <div>{this.props.ponentID}</div>
    }
}

Do something like this:

class Parent extends Component {
    constructor() {
        this.props.ponentID = "123456";
    }

    passComponentIDToAllDescendantComponents() {
        // Some super nifty code
    }

    render() {
        return <Child1 />
    }
}

// etc...

Thanks for the help

• javascript
• reactjs
• children
• descendant

• dont modify the props.. use setState – webdeb Commented Aug 6, 2016 at 16:03
• 4 You should look at React's Context: facebook.github.io/react/docs/context.html – madox2 Commented Aug 6, 2016 at 16:03
• @madox2 Thanks!!! Just what I was looking for – slim1801 Commented Aug 6, 2016 at 16:12
• @madox2, Your ment should be marked as answer. I was about to write that this was not possible till I saw the React documentation. I felt passing props made sure that the code was readable. – vijayst Commented Aug 6, 2016 at 16:38
• Word of caution: make sure that there's a strong reason to pass the props this way down the tree in an invisible fashion (because your ponent jsx no more tells the full truth). Plus as of this writing, ReactJS docs say that this is an experimental feature, so it could change in the future in a way that can break your app. – KumarM Commented Aug 6, 2016 at 17:27

1 Answer 1

You can use Context feature to pass data down to the children. In your case it could look like this:

class Parent extends Component {
    getChildContext() {
        return {ponentID: "123456"};
    }
    render() {
        return <Child1 />
    }
}

Parent.childContextTypes = {
    ponentID: React.PropTypes.string
};

class Child1 extends Component {

    render() {
        return <Child2 />
    }
}

class Child2 extends Component {

    render() {
        return <div>{this.context.ponentID}</div>
    }
}

Child2.contextTypes = {
    ponentID: React.PropTypes.string
};