Cannot read property '_notificationSystem' of null

[dparkar]

(new to React)

I am seeing the following error :

Uncaught TypeError: Cannot read property '_notificationSystem' of null
at _addNotification (notifier.jsx:11)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
at executeDispatch (EventPluginUtils.js:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach ()
at forEachAccumulated (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
at handleTopLevelImpl (ReactEventListener.js:72)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)

Here's how my code looks :

notifier.jsx :

import React, {Component} from 'react';
import NotificationSystem from 'react-notification-system';

export default class Notifier extends Component {
    
    _notificationSystem = null;

    _addNotification(event) {
        event.preventDefault();
        this._notificationSystem.addNotification({
          message: 'Notification message',
          level: 'success'
        });
      }

    componentDidMount() {
        this._notificationSystem = this.refs.notificationSystem;
      }

    render() {
        return (
            <div>
              <button onClick={this._addNotification}>Add notification</button>
              <NotificationSystem ref="notificationSystem" />
            </div>
            );
    }
}

elsewhere in component foo.jsx :

render() {
   return (
      <div className="notifier">
        <Notifier/>
      </div>
    );
}

Versions :

"react": "^15.6.2",
"react-dom": "^15.6.1",
"react-notification-system": "^0.2.16",
"react-router-dom": "^4.2.2"

Thanks for the help !

[cmkshaw]

I'm getting the same error TypeError: Cannot read property 'addNotification' of null when trying to structure my notification system as a higher order component.

My jsx:

import React, {Component} from 'react';
import NotificationSystem from 'react-notification-system';

export default (Notification) => {
    return class extends Component {
        constructor(props) {
            super(props);

            this.notificationSystem = null;
            this.success = this.success.bind(this);
            this.error = this.error.bind(this);
        }

        success(message){
            const title = "Notice!", level = "success";
            this.notificationSystem.addNotification({ title, message, level});
        }

        error(message){
            const title = "Error!", level = "error";
            this.notificationSystem.addNotification({ title, message, level});
        }

        render() {
            const props = Object.assign({}, this.props, {
                success: this.success,
                error: this.error
            });
            return <Notification {...props} >
                        <NotificationSystem ref={n => this.notificationSystem = n} style={false}/>
                    </Notification>;
        }
    };
};

Is there something I'm missing?

[raptox]

same, cannot get this to work ...

[warrenlalata]

same

[warrenlalata]

have you fixed this?

[raptox]

I used this repo instead

[wardnep]

same!

[sycu]

Same here, any update?

[heshamelmasry77]

it is really annoying people make things and post it and it never works 🈂️

[a-atalla]

use this.refs.notificationSystem instead of this._notificationSystem

// The component
<NotificationSystem ref="notificationSystem" />

//The event handler
this.refs.notificationSystem.addNotification({
      message: 'Notification message',
      level: 'success'
    })

[rowthan]

at the time of componentDidMount(){}, this.refs is empty.
so you can not get this.refs.x.
use this.refs.notificationSystem instead of this._notificationSystem

[gautham20]

Tried all the suggested methods, didn't work, used this instead

[dyst5422]

#144 should address this