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 ing from backend API call. Here's my setup:

This is in a JSON file:

  { stuff: {
    stuffIWantBolded: "bold text"
    }
  }

And my frontend looks like this:

  render() {
      // props for this ponent 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 (
          <SomeComponent someProp={textIWantToDisplay} />
        );
     };

That concatenates the two strings successfully. I've tried using .bold() at the end of stuff.stuffIWantBolded, but that apparently doesn't work, because then the string renders as <b>bold text</b> the string from backend (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.

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 ing from backend API call. Here's my setup:

This is in a JSON file:

  { stuff: {
    stuffIWantBolded: "bold text"
    }
  }

And my frontend looks like this:

  render() {
      // props for this ponent 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 (
          <SomeComponent someProp={textIWantToDisplay} />
        );
     };

That concatenates the two strings successfully. I've tried using .bold() at the end of stuff.stuffIWantBolded, but that apparently doesn't work, because then the string renders as <b>bold text</b> the string from backend (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.

• javascript
• json
• reactjs
• string

• reactjs/docs/dom-elements.html#dangerouslysetinnerhtml – Kevin B Commented Nov 5, 2019 at 23:25
• Possible duplicate of Rendering raw html with reactjs – Peter B Commented Nov 5, 2019 at 23:38

3 Answers 3

How about this:

return (
  <>
    <span style={{fontWeight: "bold"}}>{stuff.stuffIWantBolded}</span>
    <span>{theStringFromBackend}</span>
  </>
);

The <> and </> effectively allow you to return multiple items from one render function.

I would do it by using position (I prefer the strong tag to b to make text bold):

render() {
  // props for this ponent 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();
     return (
      <SomeComponent>
        <p><strong>{stuff.stuffIWantBolded}</strong> {theStringFromBackend}</p>
      </SomeComponent>
    );
 };

And in SomeComponent you will find the nested html inside props.children

for more info check here: https://reactjs/docs/position-vs-inheritance.html

It turns out you CAN pass in a prop within a self-closing tag ponent the way I want to. Not sure if it's conventionally sound/overly bloated but it looks like this:

     render() {
      // props for this ponent 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 theBoldedText = `${stuff.stuffIWantBolded}`;
         return (
          <SomeComponent someProp={<span><b>{theBoldedText}</b> <span>{theStringFromBackend}</span></span>} />
        );
     };