import React, {Component} from 'react'

export default class GeneralBanner extends Component {
    render() {
        const bannerClassName = `general-banner alert ${this.props.banner.color}`

        return (
            <div className={bannerClassName}>
                <div className="messsage"><strong>{this.props.banner.title}:</strong> {this.props.banner.message}</div>
            </div>
        )
    }
}
import React, {Component} from 'react'

export default class GeneralBanner extends Component {

    bannerClassName(level){
        var output = 'general-banner alert'
        switch (level) {
            case 'notice':  return output += ' alert-info'
            case 'success': return output += ' alert-success'
            case 'error':   return output += ' alert-danger'
            case 'alert':   return output += ' alert-warning'
            default:        return output
        }
    }

    render() {
        return (
            <div className={this.bannerClassName(this.props.banner.level)}>
                <div className="messsage"><strong>{this.props.banner.title}:</strong> {this.props.banner.message}</div>
            </div>
        )
    }
}

Add helper method to asign the correct css class to the general banner according to the asigned announcement level
Add helper method to asign the correct css class to the general banner according to the asigned announcement level
