Getting error objects are not valid as a React child

[Nisfan]

Bug using Redux example with Material UI

ReactDOM.render(
     <Provider store={store}>
          <SnackbarProvider 
               anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
              }}
          >     
               <HashRouter>
                    <Switch>
                         <Route path="/login" component={LoginPage} />
                         <PrivateRoute path="/" component={Dashboard} />
                    </Switch>
               </HashRouter>
         </SnackbarProvider>
     </Provider>,
     document.getElementById("root")
);

Objects are not valid as a React child (found: object with keys {adapter, transformRequest, transformResponse, timeout, xsrfCookieName, xsrfHeaderName, maxContentLength, validateStatus, headers, method, url, data}). If you meant to render a collection of children, use an array instead. in span (created by SnackbarItem) in div (created by SnackbarContent) in div (created by Typography) in Typography (created by WithStyles(Typography)) in WithStyles(Typography) (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by SnackbarContent) in SnackbarContent (created by WithStyles(SnackbarContent)) in WithStyles(SnackbarContent) (created by SnackbarItem) in Transition (created by Slide) in EventListener (created by Slide) in Slide (created by WithTheme(Slide)) in WithTheme(Slide) (created by TransitionComponent) in TransitionComponent (created by Snackbar) in div (created by Snackbar) in EventListener (created by ClickAwayListener) in ClickAwayListener (created by Snackbar) in Snackbar (created by WithStyles(Snackbar)) in WithStyles(Snackbar) (created by SnackbarItem) in RootRef (created by SnackbarItem) in SnackbarItem (created by WithStyles(SnackbarItem)) in WithStyles(SnackbarItem) (created by SnackbarProvider) in SnackbarProvider (at index.js:28) in Provider (at index.js:27)

Application is working fine when I don't use Notifier component

Tech	Version
Notistack	0.4.2
React	16.4.2
Browser	Chrome
material-ui/core	1.5.1

[iamhosseindhv]

@Nisfan These sort of problems are usually caused by passing invalid parameters in enqueueSnackbar method.

Please share the code from enqueueSnackbar that causes this error.

[Nisfan]

showNotification = (msg, type = 'info') => {
        const { enqueueSnackbar } = this.props;

        enqueueSnackbar({
            message: msg,
            options: {
                variant: type,
            },
        });
    }

function mapDispatchToProps(dispatch) {
    return {
        userActions: bindActionCreators(userActions, dispatch),
        enqueueSnackbar: bindActionCreators(enqueueSnackbar, dispatch),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(loginPageStyle)(LoginPage));

[iamhosseindhv]

That was it. message is not an option.

enqueueSnackbar(message, {
     variant: 'variant',
});

[Nisfan]

I actually took it from https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example

const handleClick = () => {
        props.enqueueSnackbar({
            message: 'Failed fetching data.',
            options: {
                variant: 'warning',
            },
        });
    }; 

[iamhosseindhv]

@Nisfan My mistake I didn't notice it's using redux. I'm sure I can be helpful if you provide a sandbox reproduction.