Display toastr on each item component in a list

[lednhatkhanh]

I have a component name Tasks, inside that component, I render a lot of same components named Task.

I put this code:

<ToastContainer ref="toastrContainer"
                    toastMessageFactory={ToastMessageFactory}
                    className="toast-top-right" />

Inside of the Task component, but each time I call the toastr:

this.refs.toastrContainer.error(
            error.reason,
            error.error, {
            closeButton: true,
        });

I always got this error TypeError: Cannot read property 'error' of undefined, but it work fine on the other stand-alone component tho.Could you help me with it, thank you.

I think it's because now my react page has a whole bunch of Task component that has the same toastrContainer ref...

[lednhatkhanh]

Oh, it can be fixed by invoking the method from the parent component, but I think there should be a better way to call this other than using refs.