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?

Answer 1

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 .

Answer 2

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!