- <SnackbarContent
- className={classNames(cssClass)}
- aria-describedby="client-snackbar"
- message={
- <span id="client-snackbar" className={classes.message}>
- <Icon className={classNames(classes.icon, classes.iconVariant)}/>
- {props.message}
- </span>
- }
- action={
- <IconButton
- key="close"
- aria-label="Close"
- color="inherit"
- onClick={e => props.onClose && props.onClose(e, '')}>
- <CloseIcon className={classes.icon}/>
- </IconButton>
+ <div data-cy="snackbar">
+ {
+ props.messages.map((message, index) => {
+ const [Icon, cssClass] = variants[message.kind];
+
+ return <SnackbarContent
+ key={`${index}-${message.message}`}
+ className={classNames(cssClass, classes.snackbarContent)}
+ aria-describedby="client-snackbar"
+ message={
+ <span id="client-snackbar" className={classes.message}>
+ <Icon className={classNames(classes.icon, classes.iconVariant)} />
+ {message.message}
+ </span>
+ }
+ action={actions(message, props.onClick, props.onClose, classes, index, props.autoHideDuration)}
+ />
+ })