import { observer } from "mobx-react" ; import * as React from "react" ; import ErrorAction from "../../classes/status/ErrorAction" ; import StatusActionQueue from "../../classes/status/StatusActionQueue" ; @ observer export default class ErrorStatus extends React . Component < { errors : StatusActionQueue < ErrorAction > ; } , any > { public render ( ) { if ( ! this . props . errors . isEmpty ) { const elements = this . createErrorElements ( ) ; return ( < div > < h2 > An error occured : < /h2> < ul className = "events" > { elements } < /ul> < /div>); } else { return < div />; } } private createErrorElements ( ) { const elements = [ ] ; for ( const queueElement of this . props . errors ) { elements . push ( < li key = { queueElement . key } > { queueElement . description } < br / > < br /> < div className = "buttons" > < button onClick = { ( ) => queueElement . retryCallback ( ) } > { queueElement . retryButtonText } < /button> < /div> < /li>); } return elements ; } }