Cannot read property success of undefined using Reactjs Toastr - reactjs

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);