Get message id from notistack snackbar

Question

I have implemented notistack snackbar but I would like to read the content of the snackbar onclick.

const action = key => (
  <Fragment>      
      <Button variant="outline-light" onClick={() => { alert(this.state.notice_id) }}>
          Dismiss
      </Button>
  </Fragment>
);

activeNotices.forEach((element) => {
    this.setState({notice_id: element.notice_id});
    this.props.enqueueSnackbar(element.notice_body + " " + "[" + element.notice_id + "]", { 
      variant: 'warning',
      persist: true,
      action,
      preventDuplicate: true
    });

The above code only alerts the notice_id of a single notice. How do I tie every notice to its specific notice_id? I would like to get the notice_id besides closing the snackbar whenever the dismiss button is clicked.

Sam · Answer 1 · 2020-12-27T15:26:16.970

1

Here I updated the code, you need to keep an ArrayList of notification and pass notice id as key, and get other details from the state.

 const action = key => {
       const notificatification = this.state.notifications.find(noti=>noti.notice_id===key);
     return (
      <Fragment>      
          <Button variant="outline-light" onClick={() => { alert(notificatification.notice_id) }}>
              Dismiss
          </Button>
      </Fragment>
     )};
    
    activeNotices.forEach((element) => {
      let newnotification = {
        notice_id: element.notice_id,
        messagebody: element.notice_body
    }
    this.setState(prevState => ({
      notifications: [...prevState.notifications, newnotification]
    }))
        //this.setState({notice_id: element.notice_id});
        this.props.enqueueSnackbar( element.notice_id , { 
          variant: 'warning',
          persist: true,
          action,
          preventDuplicate: true
        });
      }

edited Dec 27 '20 at 15:26

answered Dec 26 '20 at 17:19

Sam

1,040
1
7
11

Actually I am looking for away to pass my notice_id variable into the action arrow function. – Denn Dec 27 '20 at 13:04
Do you want pass as another property?,then you can pass key as a custom object e.g( {message:your message,noticeid:noticeid} in enquequesnackbar . – Sam Dec 27 '20 at 13:09
kindly update your answer with this implementation. – Denn Dec 27 '20 at 13:16
Seems the above code is not executing. I have however updated my question – Denn Dec 27 '20 at 14:02
Sam thank you very much but I still cannot get the notice_id with your code. How do you pass the newnotification object you created in theactiveNotices to the action function? – Denn Dec 28 '20 at 08:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226506/discussion-between-denn-and-sam). – Denn Dec 28 '20 at 09:11

score 0 · Answer 2 · answered Dec 29 '20 at 08:52

Figured it out

activeNotices.forEach((element) => {
    const message = element.notice_body;
    this.props.enqueueSnackbar(message, { 
      variant: 'warning',
      persist: true,
      preventDuplicate: true,
      action: key => (
        <Button variant="outline-light"
        onClick={() => { this.props.closeSnackbar(key); this.dissmissNotice(element.notice_id) }}
        >Dismiss
        </Button>
      )          
    });

Get message id from notistack snackbar

2 Answers2