How to render fontawesome as button in ReactJS

Question

I am trying to render a button with fontawesome icon using the below snippet:

<div className="form-group  col-md-2">
   <input type="button" className="btn btn-default">
   <i className="fas fa-plus-circle"></i> add
   </input>
</div>

But I keep getting this error:

input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

What is the correct way to do it?

add the icon as background-image .. and position it Answer here https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form — mercury, Nov 24 '19 at 17:26

score 2 · Accepted Answer · answered Nov 24 '19 at 20:37

In React, <input /> cannot render any child elements. Instead, use button.

<div className="form-group col-md-2">
    <button type="button" className="btn btn-default">
        <i className="fas fa-plus-circle"></i> add
    </button>
</div>

Here is an example in Sandbox.

score 0 · Answer 2 · answered Nov 24 '19 at 17:47

As the error message states with input element unfortunately you could not have any element inside.

One possible solution can be to use button instead of input element. By adding a CSS class and set the content property as in the below example, read from the documentation:

The content property is used with the ::before and ::after pseudo-elements, to insert generated content.

.icon-content:after {
  content: ' add';
}

<button class="btn btn-default icon-content" />

Hope this helps!

How to render fontawesome as button in ReactJS

2 Answers2