React How to store HTML tags as a Javascript Object

Question

I want to know how to store an html tag as a Javascript object. Consider the following code:

const temp = () => {
    const complexity = "O(n<sup>2</sup>)"
    return (
        <div>
            {complexity}
        </div>
    )
}

Right now, it renders as the exact string: O(n<sup>2</sup>)
Instead I want the <sup> to be treated as a the html tag and render as: O(n²)

Any help is appreciated. Thanks

Quentin · Accepted Answer · 2020-08-31 18:02:34Z

2

Don't use a string in the first place, use JSX:

const complexity = <React.Fragment>O(n<sup>2</sup>)</React.Fragment>

The React.Fragment is only needed here because you have three top-level nodes (text, element, text).

answered Aug 31, 2020 at 18:02

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Arun surendharan · Accepted Answer · 2020-08-31 18:14:53Z

1

This is not working because its not HTML its jsx. jsx must retun a single element..so just wrap your <sup> tag inside any other tag

const Test = () => {
const complexity = <span>O(n<sup>2</sup>)</span>
return (
    <div>
        {complexity}
    </div>
)

}

answered Aug 31, 2020 at 18:14

Arun surendharan

611 silver badge6 bronze badges

Erikm · Accepted Answer · 2021-10-22 18:43:54Z

0

I would recommend you to wrap them with empty fragments instead. E.g.

const complexity = <>O(n<sup>2</sup>)</>

answered Oct 22, 2021 at 18:43

Erikm

696 bronze badges