How to re-render component in child route when state changes in parent ?

Question

I have this page in which you click transaction button,below part come from child route. Where data should change according to dropdown value which is in parent route.Here table below transaction is not changing. Here is a snapshot.

here the code is somewhat like.

portfolioid comes from dropdown.in parent

 <div style = {{ 'padding':'10px'}} portfolioId={this.state.portfolioId}>
     // display transaction here based on state portfolioid
      {this.props.children}
    </div>

In child I tried many method but it's doesn't working.

Answer 1

You aren't actually passing the portfolioId prop to any child component. this.props.children refers to the components wrapped inside the component's tags, so portfolioId doesn't have any saying in what that this.props.children is.

You could create a child component and pass down portfolioId as a prop like you have tried and then access it inside the child component.

Parent component

...

render: function() {
    return (
        <div>
            <Portfolios portfolioId={this.state.portfolioId} />
            // Whatever else content...
        </div>
    );
}

...

And then you can access the prop inside Portfolios component with this.props.portfolioId and change the view based on that.

Or if you need to use this.props.children, you can map props into them using this technique.