Shows random number enqueuesnackbar (notistack) in react js

Question

I am using notistack package. need to show snackbar on the screen. while calling the Snack component which is using enquesnackbar it shows the snackbar but also show the random number on the screen.

I want to remove that random number from screen. it should not visible on the screen.

code sandbox demo

https://codesandbox.io/s/naughty-microservice-ocoig2?file=/src/index.js

Answer 1

I got the temporary solution for that.

I have added display non in the component. In this case random number will be there but it won't be visible on screen.

  <div style={{display: "none"}}>
    {messageList.map(({ message }) => (
      <Snack message={message} />
    ))}
    </div>

if anyone found any other solution feel free to post here.

Answer 2

I experienced this issue too. It was throwing random numbers. I moved my enquesnackbar out of any HTML element and placed it in a function and called it whenever required by passing down the message values and variant. Note: I'm using their hooks.

import { useSnackbar } from "notistack";

const { enqueueSnackbar, closeSnackbar } = useSnackbar();

const showAlert = (err, variant) => { enqueueSnackbar(err, { variant: variant, preventDuplicate: true, }); };

then in template

{error ? showAlert(error, "error") : null}