Bold certain words in an array and display them in react

I am trying to loop through an array and display them in react.

I have my string
const sentence = "I like dogs"

I would like to wrap the words “dogs” or “cats” in a strong tag before I display it

I have tried doing something like this:
const boldSentence = sentence.replace(/(dogs|cats)/gi, '<strong>$1</strong>');

Then in my render method I have

return (
  <p>{boldSentence}</p>
)

This returns it as a string and not html tags. Can anyone help me figure out how to add the html tags in so they will display?

It escapes the string to avoid security issues. Ideally do not do this, use JSX, that’s what it’s there for. React does provide dangerouslySetInnerHTML which allows React to have innerHTML. You definitely don’t need it here though

How would I do this in JSX?

Generally when you want to loop an array and return it at JSX you use the map().

arr.map(str => {
 return (
  //your html-tag with array content.
);
});

You could use in-line styling. You can add to your rendered html a style prop and pass it your css.
<p style={{ // add some css here //}} >

Loop through the set of words (as described in other posts) and conditionally render:

return (
  <strong>{your text}</strong>
)