Replace in string from an array of modified strings

Question

I'm trying to to take a string with [WORDS] within it and replace it with the contents of my array. Each item in the array should be wrapped  elements.

For instance, I have this string.

let output = "This is my string body with [WORDS] within it.";

Now I have an array of words coming from an API endpoint and looks something like:

["test","word1","word2","word3"]

When the array comes in, I'm mapping it so that each array element can be wrapped in :

let words = api_words.map(function (word) {
  return `<strong>${word}</strong>`;
});

And then I pass my words to a replace function.

const formatted = string.replace("[WORDS]", words);

This does its job, but it's not rendering the  as an actual HTML element.

So it looks (rendered) something like:

This is my string body with test,word1....

My return is:

return (
    <React.Fragment>
        {formatted}
    </React.Fragment>
}

Where I actually want the words to be bolded. How do I get react to actually render as html here? Or am I going about this wrong?

Well how is it being rendered? You are missing the important step. — epascarello
– epascarello, Commented Jul 17, 2020 at 18:55
Try this const formatted = string.replace("[WORDS]", words.join(',')); — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Jul 17, 2020 at 18:56
@epascarello its rendered as test.... not actually bolded — Mike
– Mike, Commented Jul 17, 2020 at 18:57
How is it being rendered? What code is displaying it? You show you building the string which clearly is not the issue. The issue is the rendering of that string. — epascarello
– epascarello, Commented Jul 17, 2020 at 18:58

Jumshud · Accepted Answer · 2020-07-17 19:04:10Z

1

Try this one:

<div dangerouslySetInnerHTML={{ __html: htmlText }}>

answered Jul 17, 2020 at 19:04

Jumshud

1,4351 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andsilver · Accepted Answer · 2020-07-17 19:01:22Z

0

dangerouslySetInnerHTML - pass the string into this prop.

<div dangerouslySetInnerHTML={formatted} ... />

answered Jul 17, 2020 at 19:01

andsilver

6,0323 gold badges22 silver badges50 bronze badges

Comments

Rocker Feller Jr · Accepted Answer · 2020-07-17 19:09:42Z

0

Remove the string literal so it is {word} 

answered Jul 17, 2020 at 19:09

Rocker Feller Jr

13 bronze badges

Collectives™ on Stack Overflow

Replace in string from an array of modified strings

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related