title: Make part of a string value for React Element bold
body: <p>I have the variable defined in my file:</p>
  
  <pre><code>var text = `The start of string ${&lt;b&gt;{this.state.isTrue ? 'Bolded' : 'Also Bolded'&lt;/b&gt;} the end of string.`
  </code></pre>
  
  <p>This string is being passed to a React element:</p>
  
  <pre><code>&lt;span&gt;{text}&lt;/span&gt;
  </code></pre>
  
  <p>I want the texts <code>Bolded</code> or <code>Also Bolded</code> to be bolded when the component renders, but depending on the way I am trying to pass the string, I either get <code>[object Object]</code> instead or <code>&lt;b&gt;Bolded&lt;/b&gt;</code>.</p>
  
  <p>The only way that I found working was this:</p>
  
  <pre><code>var text = &lt;React.Fragment&gt;The start of string {&lt;b&gt;{this.state.isTrue ? 'Bolded' : 'Also Bolded'&lt;/b&gt;} the end of string.&lt;/React.Fragment&gt;
  </code></pre>
  
  <p>But this seems rather verbose and sometimes string is plain and does not contain any placeholders, so using React element to wrap it seems unnecessary. Plus, I would like to be able to store the value in the database and when retrieved it should be interpolated in a way that would show the text that is marked as bolded - bolded.</p>
  
  <p><strong>Question:</strong> Is there any way to have the text between <code>&lt;b&gt;&lt;/b&gt;</code> within a string bolded when the component gets rendered?</p>