React data flow

1

Hey, I have the following 4 components:

Layout
 - Menu
 - Categories
 - Question

Now you visit f.e. /question/1234. In my case, the Layout container get’s the url parameter, set it as state questionId and passes it down to the Question component. The Question component then subscribes to the Mongo data. After the subscription is ready, I need to tell the the Categories component, which category the question has to set the category link to active.

How would you handle this data flow? At the moment, I’m doing this in my Question container:

componentDidMount() {

    this.autorun(() => {

        if(this.subscriptionsReady()) {
            var question = Question.findOne({urlTitle:this.props.questionId});
            this.setState({
                ready: true,
                question: question,
 
            });

            //Passes the category up to Layout to change Layout's state - the Categories component then get's the value as prop from Layout's state
            this.props.setCategory(question.categoryId);
        }

    });

}

This works, but I don’t know if this is the correct way to handle this issue? Normally people say I need to respect React’s top-down architecture, but this would mean that I have to subscribe to all data in my Layout component, passing it down to the childs - but that also doesn’t feel right.

2

Keep your Question and Categories pure so they only render using props, and subscribe to the data you need in Layout and then pass it down to the children as the data becomes available. Question shouldn’t have to subscribe to anything.

1 Like