Allreadyhome Allreadyhome - 11 months ago 204
React JSX Question

React Global notification system

I have installed

which is working fine and producing notifications. I am trying to set it up so that I have a global container that holds the notifications so if the user navigates to a different view the notification doesn't dissapear.

My CONTAINER file is setup using the following

render: function () {
return (

<section id="main">


{ this.props.children }

<NotificationSystem id="notificationSystem" ref="notificationSystem" />




What I am struggling with is how to reference
from the child components(this.props.children)?

A notification can be added using the following from within the container file.

message: 'Notification message',
level: 'success'

Answer Source

based on this answer you can do something along the lines of:

createChildrenWithProp: function() {
  const childrenWithProps =,
     (child) => React.cloneElement(child, {
       addNotification: this._notificationSystem.addNotification.bind(this)

    return <div>{childrenWithProps}</div>

in the container file do this:

{ this.createChildrenWithProp() }