Q:

How to get react grand-child node to render when child is out of my control

I have a react component which uses a 3rd party library Component as a Child node.  The Grand children (or the children of the 3rd party libary) are under my control.  When my component receives new props it re-renders, however the 3rd party component seems to stop my components grand-children from re-rendering also, even though the props my component received, are passed to the non-re-rendering components directly
If I remove the 3rd party component then my component re-renders as do the grand-children.
    render() {
        <div>
            <ThirdPartyComponent props={blah}>
                {this.props.products.map(prod => <MyGrandChildrenComponents product={prod} />
            </ThirdPartyComponent>
        </div>
    }

A concrete example can be found on this code sandbox: codesandbox.io/s/silly-grass-7frlx
I'd expect my MyGrandChildrenComponents component to get updated when this.props.products changes... Any hints?

A:

This can happen if ThirdPartyComponent is a stateful component and is not handling its prop updates correctly. One way to force a re-render is to add a key prop to your ThirdPartyComponent and update its value when a re-render is needed.
render() {
        <div>
            <ThirdPartyComponent key={something-that-changes-when-rerender-needed} props={blah}>
                {this.props.products.map(prod => <MyGrandChildrenComponents product={prod} />
            </ThirdPartyComponent>
        </div>
    }

