Auto create Test Toast on page load

ToastsContainer.js

import React, { useEffect } from 'react';
import Toasts from 'components/Toasts/Toasts';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as toastsActions from 'state/toasts/ToastsActions';

// Just here for testing
const types = ['info', 'success', 'warning', 'error'];

// Just here for testing
const magicToast = (display, idx) => ({
  text: 'I just spawn more of myself.',
  type: types[idx % types.length],
  actions: [
    { label: 'Same type', onClick: () => display(magicToast(display, idx)) },
    { label: 'Next type', onClick: () => display(magicToast(display, idx + 1)) }
  ]
});

/**
 * Wires the Toasts component into the redux store.
 */
const ToastsContainer = ({ toasts, actions: { success, display, dismiss, pause, resume } }) => {
  // Just here for testing
  useEffect(() => {
    success('The Toast container has been initialised.');
    display(magicToast(display, 0));
  }, []);

  return (<Toasts
    toasts={toasts}
    onDismiss={dismiss}
    onPause={pause}
    onResume={resume}
  />);
};

const mapStateToProps = ({ toasts }) => ({ toasts });

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(toastsActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(ToastsContainer);