React Dev Tools shows 'Anonymous' for every component in the Components tab

Question

In Browser, React-Devtools, in the Components tab 'Context.Privder ...Anonymous' shows throughout rather than each Component name....

I understand that is to do with the way each component is exported. In my app I have components which would typically look like...

class MyClassComponent extends Component {
// ...code..
}
export default connect(mapStateToProps)(withRouter(withStyles(styles)(MyClassComponent));

or mostly with just 'withStyles'...

class MyOtherClassComponent extends Component {
// ...code..
}
export default withStyles(styles)(MyOtherClassComponent)

How can i change the 'export' line so the component name shows in the React DevTools Tree?

Answer 1

Give it a displayName:

const WrappedComponent = withStyles(styles)(MyOtherClassComponent)
WrappedComponent.displayName = MyOtherClassComponent

export default WrappedComponent

But I would expect MyOtherClassComponent to show up in dev tools even without a displayName, it should just be wrapped by an Anonymous component (or two or 10 depending on how many HOCs you've used) first.