import { observer } from "mobx-react" ; import * as React from "react" ; import { lazyInject } from "../../inversify.config" ; import AppStatusStore from "../../stores/AppStatusStore" ; @ observer export default class InfoStatus extends React . Component < Record < string , never > , any > { @ lazyInject ( "AppStatusStore" ) private readonly appStatusStore ! : AppStatusStore ; public render ( ) { if ( ! this . appStatusStore . statusQueue . isEmpty ) { const elements = this . createInfoStatusElements ( ) ; return ( < div > < ul className = "events" > { elements } < /ul> < /div>); } else { return < div />; } } private createInfoStatusElements ( ) { const elements = [ ] ; for ( const queueElement of this . appStatusStore . statusQueue ) { elements . push ( < li key = { queueElement . key } > { queueElement . description } < br / > < br /> < div className = "buttons" > < button onClick = { ( ) => this . appStatusStore . removeStatus ( queueElement ) } > OK < /button> < /div> < /li>); } return elements ; } }