How to add text + icon to HTML table row element in Reactjs

Question

I am trying to update an HTML table row element with a text and icon. This is what I have tried so far:

const cell = document.getElementById("cellID");

if (true) { cell.innerHTML = {someText} {<i className="fa fa-exclamation-circle fa-fw" />} }

Here, cell is a cell in the the HTML table. For example, <td id="someId">some text</td>, I can update the text easily with cell.textContent = 'newText' but it does not work when I try to add an icon next to the text. It does not work. How can I add the icon with the text?

Rafi · Accepted Answer · 2018-11-09 21:24:26Z

1

Have you tried with template literals

   if (true) { 
        cell.innerHTML = `${someText} <i class="fa fa-exclamation-circle fa-fw" />`
   }

edited Nov 9, 2018 at 21:24

Rafi

6251 gold badge9 silver badges23 bronze badges

answered Nov 9, 2018 at 20:59

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

5 Comments

Rafi Over a year ago

Yes, I just tried. It shows some text [object Object].

Rafi Over a year ago

I got it to work. There is a slight change from what you recommended. if (true) { cell.innerHTML = ${someText} <i class="fa fa-exclamation-circle fa-fw" />` }`

Hemadri Dasari Over a year ago

I didn’t get the fix you did

Rafi Over a year ago

if (true) { cell.innerHTML = '${someText} <i class="fa fa-exclamation-circle fa-fw" />' } I just used the icon element as a string in the innerHTML. Also, replaced 'className' with 'class'. Hope I explained it better now.

Hemadri Dasari Over a year ago

Yes. I thought of pointing the same. As we are directly manipulating them DOM element we have to change it to class instead of className to icon.

Collectives™ on Stack Overflow

How to add text + icon to HTML table row element in Reactjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related