title: Conditional rendering in React based on state
body: <p>I'm sending an API request and render its result in to UI.</p>
  
  <p>Now, for the error-handling, I wanted that if there is an error a div which contains an error message gets rendered in to the UI.</p>
  
  <p>To achieve this I wrote the following ternary condition:</p>
  
  <pre><code>const showError = this.state.error
  ? `&lt;div className="error-container"&gt;
      Error:
        &lt;p&gt;{this.state.error}&lt;/p&gt;
     &lt;/div&gt;`
  : '';
  </code></pre>
  
  <p>And then used this inside my render method: <code>{showError}</code></p>
  
  <p>But React see the result as a string and renders the following to the UI:</p>
  
  <p><a href="https://i.stack.imgur.com/aazwy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aazwy.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong?</p>