React Problem with multiple export in Class Component

Question

Previously in my Class Component redux connect used to look something like this. This worked without any issues.

//File: MyComponent.jsx
    //in below code this.props.selectProducts is not undefined and this works fine
        const mapStateToProps = null;
        const mapActionsToProps = {
            selectProducts
        };
        
        export default connect(
            mapStateToProps,
            mapActionsToProps
        )(MyComponent);

After this I had to use this component called notistack to display the snackbar and I exported this as default instead of the existing redux connect. Now I am facing a issue where the props doesn't exist.

const mapStateToProps = null;
const mapActionsToProps = {
    selectProducts
};

//Now this.props.selectProducts is undefined which is part of redux store
//But this.props.enqueueSnackbar("Preference saved."); this works. which is part of withSnackbar
export const ConnectedList = connect(
    mapStateToProps,
    mapActionsToProps
)(MyComponent);
export default withSnackbar(MyComponent);

If i make the redux connect as default I am unable to access this.props.enqueueSnackbar(). Any help would be much appreciated. Thanks

Answer 1

Just use withSnackbar on the component returned by connect and use that:

const ConnectedList = connect(
    mapStateToProps,
    mapActionsToProps
)(MyComponent);
export default withSnackbar(ConnectedList);