I have a Signup page developed with ReactJS and I want after the click of submit button, it redirects me to login page, after that it display a react-notification which message is response.data.message.

I used react-notifications-ponent :

import ReactNotification from "react-notifications-ponent";
export default class Signup extends Component {
  constructor(props) {
    super(props);
    this.addNotification = this.addNotification.bind(this);
    this.notificationDOMRef = React.createRef();
  }
 addNotification(message) {
    this.notificationDOMRef.current.addNotification( {
      title: "Awesomeness",
      message:{message},
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: { duration: 2000 },
      dismissable: { click: true }
    });

  }

 handleSubmit =  event => {
    event.preventDefault();
    const users = {
      name:this.state.name,
      email:this.state.email,
    }
    console.log(users)
   const { history } = this.props
   axios({
    method: 'post',
    url: 'http://172.16.234.24:8000/api/register',
    data: users,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    }
    })
    .then(function (response) {

         try{
      console.log(response);
      console.log('yes');
      history.push('/login');
      this.addNotification(response.data.message);
             }
        catch{
      console.log('no');
            }

    })
    .catch(function (response) {
        console.log(response);
    });

  }
<Button type="submit" onClick={this.handleSubmit}>Register </Button>
          <ReactNotification ref={this.notificationDOMRef} />

When I run it, it redirects me to the login page and the notification not working and I get no in the console of catch.

How can I fix that or have you a suggestion to use another system for notifications ?

I have a Signup page developed with ReactJS and I want after the click of submit button, it redirects me to login page, after that it display a react-notification which message is response.data.message.

I used react-notifications-ponent :

import ReactNotification from "react-notifications-ponent";
export default class Signup extends Component {
  constructor(props) {
    super(props);
    this.addNotification = this.addNotification.bind(this);
    this.notificationDOMRef = React.createRef();
  }
 addNotification(message) {
    this.notificationDOMRef.current.addNotification( {
      title: "Awesomeness",
      message:{message},
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: { duration: 2000 },
      dismissable: { click: true }
    });

  }

 handleSubmit =  event => {
    event.preventDefault();
    const users = {
      name:this.state.name,
      email:this.state.email,
    }
    console.log(users)
   const { history } = this.props
   axios({
    method: 'post',
    url: 'http://172.16.234.24:8000/api/register',
    data: users,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    }
    })
    .then(function (response) {

         try{
      console.log(response);
      console.log('yes');
      history.push('/login');
      this.addNotification(response.data.message);
             }
        catch{
      console.log('no');
            }

    })
    .catch(function (response) {
        console.log(response);
    });

  }
<Button type="submit" onClick={this.handleSubmit}>Register </Button>
          <ReactNotification ref={this.notificationDOMRef} />

When I run it, it redirects me to the login page and the notification not working and I get no in the console of catch.

How can I fix that or have you a suggestion to use another system for notifications ?

• javascript
• reactjs
• notifications

• Pass an error into the catch and output the error. It will probably give you a better understanding of what is going wrong. try { ... } catch(error) { console.log(error); } – JLeggatt Commented Jan 18, 2019 at 10:50
• @JLeggatt the error is TypeError: Cannot read property 'addNotification' of undefined – Ichrak Mansour Commented Jan 18, 2019 at 10:53
• Ah, so your this reference has lost reference. This is because the anonymous function doesn't know what addNotification refers to. Try adding a .bind to the inline function that then calls. – JLeggatt Commented Jan 18, 2019 at 11:04
• I have already this.addNotification = this.addNotification.bind(this); in my constructor – Ichrak Mansour Commented Jan 18, 2019 at 11:07
• The problem is that you're using the this keyword inside the anonymous function the then calls. If you console log this above the this.addNotification you'll see it doesn't have access to the this.addNotification – JLeggatt Commented Jan 18, 2019 at 11:10

1 Answer 1

You don't need to bind this, you should use arrow functions

.then(response => {
    try{
      console.log(response);
      console.log('yes');
      history.push('/login');
      this.addNotification(response.data.message);
    } catch(error) {
      console.log('no');
    }
});