title: React.js - Render Components with Different Styles based on props
body: <p>So let's say I am creating a simple web layout, where I have a feedback message component above the <code>MainContent</code> component, as so:</p>
  
  <pre><code>class WebLayout extends Component {
    render() {
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;FeedBackMessage 
          shouldRenderMessage={true}
          typeMessage={"error"}
          message={"Wrong input!"}
        /&gt;
        &lt;MainContent /&gt;
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>And let's assume that I have different types of messages such as <code>error</code>, <code>warning</code>, <code>success</code>. </p>
  
  <p>Inside the <code>FeedBackMessage</code>, I may have something as so:</p>
  
  <pre><code>class FeedBackMessage extends Component {
    renderMessage(){
      const {shouldRenderMessage, typeMessage, message } = this.props;
      if (shouldRenderMessage === true){
        &lt;div&gt;
          {message}
        &lt;/div&gt;
      }
    }
    render(){
      return (
        &lt;div&gt;
          {this.renderMessage().bind(this)}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I am stumped on how I can render <code>FeedBackMessage</code> styling based on <code>typeMessage</code> prop value.</p>
  
  <p>For instance, if I pass <code>typeMessage</code> with 'error', I like to have the <code>FeedbackMessage</code> component with a red border styling. Or if I pass <code>confirm</code>, I'd like to render with green border.</p>