CODEWITHSUNDEEP
javascripthtmlreactjspreact
Derek Lawrence
Derek Lawrence

Reputation: 1588

Pass array of strings to React component with string coming from json file and allow inline span tags

I'm trying to get an array of strings to display as paragraphs and allow an inline span tag inside of these strings.

My issue comes is when the value is added inside the paragraph the decodes the "<" and ">" tag start and ends to their decoded values "<" and ">"

Is there an easy way to get this working without making a specific component for this case?

My React component is as follows

const Paragraphs = ({ data, languageText }) => {
    if (data) {
        const texts = languageText[data.languageKey];

        return (
            <section>
                {texts && texts.map(text => <p>{text}</p>)}
            </section>
        );
    } else {
        console.warn(`webpage::element: 'PARAGRAPHS' lack content`);
    }
}
export default Paragraphs;

this is the array that is passed to texts

[
"When a Relic is found or assembled from Relic Fragments, a payout is rewarded, based on its rarity. <span style=\"font-weight: bold\">The rarer the item, the higher the payout!</span>",
"In addition to Relics, Gold Coins can also be found."
],

Upvotes: 0

Views: 256

Answers (1)

Dupocas
Dupocas

Reputation: 21347

By default, React escapes HTML to prevent XSS just use dangerouslySetInnerHTML, take a look at oficial docs

Upvotes: 2

Related Questions