title: How to add JSX inside props?
body: <p>I have a component which has <code>props</code> value. This component is global and I don't want to change its source code.
  I want to add <code>pre</code> tag inside the value prop to have a proper indentation between <code>title</code> and <code>value</code>.</p>
  <pre><code>&lt;component
     title = {&lt;strong&gt;Name&lt;/strong&gt;}
     value = {&lt;pre&gt;  {name === undefined ? myName : myNames}&lt;/pre&gt;}
  /&gt;
  </code></pre>
  <p>Issue: I get <strong>NaN</strong> for value prop. <br>
  How do I fix it?
  <br>
  Also, is there a way to add a gap/padding between <code>title</code> and <code>value</code>? Please note that I do not wish to modify the source file of <code>Component</code>.</p>