Cannot read property success of undefined using Reactjs Toastr

Question

Am working with react toastr from this link https://www.npmjs.com/package/react-toastr for my react-redux form. i have installed as npm install --save react-toastr and I have made import as per requirements

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

at src/index.html i have toastr.min.css and toastr.animate.css files

At RegisterPage Component when I click at Test Toastr Button as per code below, everything works fine

 <div className="container">
  <ToastContainer
    ref={ref => container = ref}
    className="toast-top-right"
  />
  <h1>
    React-Toastr
    <small>React.js toastr component</small>
  </h1>
  <div className="btn-container">
    <button
      className="primary"
      onClick={() =>
        container.success(`hi! Now is `, `success`, {
          closeButton: true,})
      }
    >
     Test Toastr
    </button>

  </div>

</div>

Here is what am trying to do. I want to display toastr message alert once form registeration is successful but it shows error

bundle.js:36689 Uncaught TypeError: Cannot read property 'success' of undefined when I added this code below at user.service.js files

setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);

Here is the user.service.js files

import config from 'config';
import { authHeader } from '../_helpers';

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

export const userService = {

    register,
    update,
};


function register(user) {
    const requestOptions = {
        method: 'POST',

return fetch(`../register.php`, requestOptions).then(handleResponse)
        .then(res => {

            if (res) {

//setTimeout(()=>{ this.container.success('Data added successfully'); }, 400);
setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);
console.log('Data added suucessfully');
            }

            return user;
        });


}

The code below is the RegisterPage Component.

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

class RegisterPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {
                firstName: '',
                lastName: '',
                username: '',
                password: ''
            },
            submitted: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const { name, value } = event.target;
        const { user } = this.state;
        this.setState({
            user: {
                ...user,
                [name]: value
            }
        });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.setState({ submitted: true });
        const { user } = this.state;
        const { dispatch } = this.props;
        if (user.firstName && user.lastName && user.username && user.password) {
            dispatch(userActions.register(user));
        }
    }

    render() {
        const { registering  } = this.props;
        const { user, submitted } = this.state;
        return (
            <div className="col-md-6 col-md-offset-3">

                <h2>Test Toastr</h2>

 <div className="container">
  <ToastContainer
    ref={ref => container = ref}
    className="toast-top-right"
  />
  <h1>
    React-Toastr
    <small>React.js toastr component</small>
  </h1>
  <div className="btn-container">
    <button
      className="primary"
      onClick={() =>
        container.success(`hi! Jmarkatti `, `success`, {
          closeButton: true,})
      }
    >
     Test Toastr
    </button>

  </div>

</div>

                <form name="form" onSubmit={this.handleSubmit}>

// form input removed to reduce code

                    <div className="form-group">
                        <button className="btn btn-primary">Register</button>
                        {registering && 
                                         }

                    </div>
                </form>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { registering } = state.registration;
    return {
        registering
    };
}

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };

An Updates is Here

user.action.js code

function register(user) {
    return dispatch => {
        dispatch(request(user));

        userService.register(user)
            .then(
                user => { 

/*
                   dispatch(success());
                    history.push('/login');
                    dispatch(alertActions.success('Registration successful'));
*/

                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            );
    };

user.reducer.js codes

import { userConstants } from '../_constants';

export function registration(state = {}, action) {
  switch (action.type) {
    case userConstants.REGISTER_REQUEST:
      return { registering: true };
    case userConstants.REGISTER_SUCCESS:
      return {};
    case userConstants.REGISTER_FAILURE:
      return {};
    default:
      return state
  }
}

Answer 1

Try with this

Change

   setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);

To

    setTimeout(()=>{ 
            if(this.container){
                     this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); 
             }
     }, 400);