0

I have used react-notification-system in React+Javascript, when I tried in React+Typescript it throws error as 

Type 'ReactInstance' is not assignable to type 'null'
Type 'Element' is not assignable to type 'null'

in the line included in componentDidMount()

Patientadd.tsx

import * as NotificationSystem from 'react-notification-system';
class Patientadd extends React.Component<any, IState> {

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

  _notificationSystem: null;
  _addNotification=(event)=> {
      this._notificationSystem.addNotification({
        message: event.message,
        title:event.title,
        level: event.level,
        autoDismiss: event.autoDismiss,
      });
  }
  public render() {
    return (
        <div className="App2">
          <NotificationSystem ref="notificationSystem" />
        </div>
    );
  }
}
nucleartux
  • 1,381
  • 1
  • 14
  • 36
San Daniel
  • 165
  • 1
  • 3
  • 15

1 Answers1

0

Please try 

import React from 'react';
import ReactDOM from 'react-dom';
import * as NotificationSystem from 'react-notification-system';

export default class Patientadd extends React.Component<any, IState> {
  notificationSystem = React.createRef();

  addNotification = (event: any) => {
    event.preventDefault();
    const notification = this.notificationSystem.current;
    notification.addNotification({
      message: event.message,
      title:event.title,
      level: event.level,
      autoDismiss: event.autoDismiss,
    });
  };

  render() {
    return (
      <div className="App2">
        <button onClick={this.addNotification.bind(this)}>Add notification</button>
        <NotificationSystem ref={this.notificationSystem} />
      </div>
    </div>
    );
  }
}
z1m.in
  • 1,661
  • 13
  • 19
  • throws error notificationSystem: React.createRef(); as ===> "(13,38): error TS1005: ';' expected" &&&& ,changed the line notificationSystem= React.createRef(); ==>"error (19,21): Parameter 'event' implicitly has an 'any' type" "addNotification = event => { – San Daniel Mar 05 '19 at 13:53
  • Error: Object is possibly 'null'. const notification = this.notificationSystem.current; – San Daniel Mar 05 '19 at 14:14
  • Try to use https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#non-null-assertion-operator – z1m.in Mar 05 '19 at 14:48
  • this.notificationSystem!.current – z1m.in Mar 05 '19 at 14:49