title: How can I make some text from a json string bold?
body: <p>I want to concatenate two strings in react such that the first displays bold and the second does not. I have the string I want bolded in a JSON file and I have the string I want to concatenate coming from backend API call. Here's my setup: </p>
  
  <p>This is in a JSON file: </p>
  
  <pre><code>  { stuff: {
      stuffIWantBolded: "bold text"
      }
    }
  </code></pre>
  
  <p>And my frontend looks like this: </p>
  
  <pre><code>  render() {
        // props for this component in which I'm rendering SomeComponent (see below)
        const { data } = this.props
        const { theStringFromBackend } = data
        // a method to get the string that is working for me
        const stuff = this.getTheStringFromTheJSON();
        const textIWantToDisplay = `${stuff.stuffIWantBolded} ${theStringFromBackend}`;
           return (
            &lt;SomeComponent someProp={textIWantToDisplay} /&gt;
          );
       };
  </code></pre>
  
  <p>That concatenates the two strings successfully. I've tried using <code>.bold()</code> at the end of <code>stuff.stuffIWantBolded</code>, but that apparently doesn't work, because then the string renders as <code>&lt;b&gt;bold text&lt;/b&gt; the string from backend</code> (assuming that's what the string from backend says), with the HTML tags written out explicitly instead of rendering actual bold text. Is there something I'm missing? I don't think one can just make the string bold in the JSON...perhaps I need to use a regex? Any help would be greatly appreciated. </p>