Solution 1 :

In order set HTML in a React component, you need to create an object that has the __html property and the a string that contains the relevant HTML markup. Like this:

{__html: '<span>Something</span>'};

And finally render it using dangerouslySetInnerHTML which is React’s replacement for the native innerHTML:

function Tooltip(props) {
  const someHTML = {
    __html: `<div class="tooltip d-none d-md-block" role="tooltip"><div class="arrow"></div><div class="tooltip-inner">${props.text}</div></div>`
  return <div dangerouslySetInnerHTML={someHTML}></div>;

function App() {
  return (
    <div className="container">
      <Tooltip text="Hello this is a tooltip" />

ReactDOM.render( < App / > , document.getElementById('root'))
<script src=""></script>
<script src=""></script>
<div id="root"></div>

Solution 2 :

You just pass attribute like this:


"<div class="tooltip d-none d-md-block" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"></div>


Updated Code

Solution 3 :

There is your answer:

const App = () => {
 const data = '<b>lorem ipsum</b>';

 return (
     dangerouslySetInnerHTML={{__html: data}}

export default App;

Problem :

I can not figure it out that how is it possible to use HTML in a data attribute inside React’s jsx.


data-bs-template='<div class="tooltip d-none d-md-block" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Is this approach right or wrong?


Comment posted by GROVER.

What do you mean you can’t figure out how to do it? You just did it. What is the intended result?

Comment posted by Usman Gill

Hi @juan-marco ! I was confused actually to use HTML for data-bs-template. Thanx for the clarification.

Comment posted by tirth1620

Can try attribute value as a string. It is working.