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

Share Improve this question Follow edited Feb 25, 2019 at 0:16 Lazar Nikolic 4,40411 gold badge2626 silver badges4646 bronze badges asked Jan 18, 2019 at 10:47 Ichrak MansourIchrak Mansour 1,9521212 gold badges3838 silver badges6464 bronze badges 6

• 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

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

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