React-toastify: PROBLEM - random string inserted to the page automatically

[AiBaby19]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
getting random letters when activating toastify, number changing randomly everytime I call the toastify

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
`class ThankYou extends Component {

render() {
    return (
      <React.Fragment>
            {toast.warn("We'll be in touch!")}
            <ToastContainer
                position="top-right"
                autoClose={3000}
                hideProgressBar
                // newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnVisibilityChange
                draggable
                pauseOnHover/>
      </React.Fragment>
    );
}

}`

the code render is in another component with a simple state change toggle

What is the expected behavior?
just a notification

[fkhadra]

Hello @dvash999,

You are calling js {toast.warn("We'll be in touch!")} inside the render method, toast return the toastId this is why you get the id rendered.

You should trigger the toast from an action. If you want to display the toast when the user click on the send button, you can do it as follow for example.

class MyComponent extends Component {

render() {
    return (
      <React.Fragment>
            <ToastContainer
                position="top-right"
                autoClose={3000}
                hideProgressBar
                // newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnVisibilityChange
                draggable
                pauseOnHover/>
        <button onClick={() =>  toast.warn("We'll be in touch!"}>Send</button>
      </React.Fragment>
    );
}

[AiBaby19]

hmm great got it!
thank you!

[fkhadra]

@dvash999 you're welcome. Don't hesitate to check the documentation for more examples.
PS: Really nice font 👌

[NishargShah]

Hello @dvash999,

You are calling js {toast.warn("We'll be in touch!")} inside the render method, toast return the toastId this is why you get the id rendered.

You should trigger the toast from an action. If you want to display the toast when the user click on the send button, you can do it as follow for example.

class MyComponent extends Component {

render() {
    return (
      <React.Fragment>
            <ToastContainer
                position="top-right"
                autoClose={3000}
                hideProgressBar
                // newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnVisibilityChange
                draggable
                pauseOnHover/>
        <button onClick={() =>  toast.warn("We'll be in touch!"}>Send</button>
      </React.Fragment>
    );
}

I need to do with JS thing {toast.warn("We'll be in touch!")}. How can I achieve it without showing toastId?