how to add html tags inside jsx (ReactJS)

Question

I'm trying to put a html tag inside a span to give some styling to a certain word. but it results in a plain text instead.

expectation:

abc AND xyz

what I get instead:

abc <strong>AND</strong> xyz

here's my code: ( codesandbox )

import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <span>{isLoading ? "abc" : `abc <strong>AND</strong> xyz`}</span>
      </div>
    </div>
  );
}

PRSHL · Accepted Answer · 2022-07-30 11:05:06Z

4

You can just add it like this

<span>{isLoading ? "abc" : (<>abc <strong>AND</strong> xyz</>)}</span>

answered Jul 30, 2022 at 11:05

PRSHL

1,4531 gold badge14 silver badges35 bronze badges

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

Comments

Alan Friedman · Accepted Answer · 2022-07-30 11:08:27Z

0

One issue with your approach is that there are multiple adjacent DOM nodes. You can wrap them using a fragment:

<>abc <strong>AND</strong> xyz</>

answered Jul 30, 2022 at 11:08

Alan Friedman

1,61010 silver badges7 bronze badges

Collectives™ on Stack Overflow

how to add html tags inside jsx (ReactJS)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related