How can I make some text from a json string bold?

Question

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:

This is in a JSON file:

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

And my frontend looks like this:

  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 (
          <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.

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml — Kevin B, Nov 05 '19 at 23:25
Possible duplicate of [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — Peter B, Nov 05 '19 at 23:38

score 1 · Answer 1 · answered Nov 05 '19 at 23:37

1

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.

answered Nov 05 '19 at 23:37

whiterook6

3,270
3
34
77

Thanks! However, if I just want to pass a prop to `` as in the component depicted in my question ``, and that prop is called `someProp`, can I still render bold and non-bold concatenated strings and pass that into `someProp`? – M. Greco Nov 06 '19 at 15:56
You can pass JSX or another component as a prop, yes. The syntax is a little tricky and may require some googling. But at some point you're going to need a span with css, or something similar. – whiterook6 Nov 06 '19 at 17:17

score 0 · Answer 2 · answered Nov 05 '19 at 23:49

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

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();
     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.org/docs/composition-vs-inheritance.html

Thanks guys...these are all great answers. I suppose what still isn't clicking with me is that I want to keep `` a closed tag without adding any span elements inside of it. I want to only pass the `textIWantToDisplay` as a prop, which I've called `someProp`. Is this possible? — M. Greco, Nov 06 '19 at 15:42

score 0 · Answer 3 · answered Nov 06 '19 at 16:31

0

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

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

answered Nov 06 '19 at 16:31

M. Greco

49
1
1
8

Sure it works, but that's ugly as hell :) Can I ask you why you so desperately need a self closing component? – brein Nov 06 '19 at 22:48
I need it to be self-closing because it's a component that's been imported into a larger component and it has a ton of props associated with it. Moreover I didn't mention this in the question but it's a component that's wrapped inside a label composer and the prop `someProp` actually belongs to the label composer rather than `SomeComponent`. So `SomeComponent` needs a label associated with it rather than inside of it. I don't know if I'm making much sense since I'm a new coder but that's what it is. – M. Greco Nov 07 '19 at 14:09

How can I make some text from a json string bold?

3 Answers3