ToastContainer error when rendering dynamic Toast components

[crubio]

Hi, I'm attempting to setup a react context for Toasts; we want to be able show multiple toasts that persist across route changes. The issue I'm running into is where the ToastContainer is introduced; running into the error Rendered more hooks than during the previous render. I can create a custom element to contain the toasts, but am wondering if there is a large issue with the ToastContainer component and rendering dynamic toast as children.

Demo is here: https://codesandbox.io/s/great-ellis-spzpx?file=/src/ToastContext.tsx

I've got a few static toasts in a ToastContainer and thats just fine. Using the add toast button will unleash the error. I am using ToastContainer within the render function of ToastContext.tsx as the parent of the rendered toasts. Is this a proper way of setting this up or do you advise another method? Thanks!

[richbachman]

Hi @crubio

Thanks for posting this issue/question. That issue is a known bug in an underlying part of our ToastContainer. We have a ticket in our current sprint to get it fixed. We'll make sure to update you when the fix has been released.

Let us know if you have any other questions.

[crubio]

Great, thanks Rich. For now I'm using a styled div with additional css for the parent, which seems a sufficient workaround. Appreciate the quick reply!