CODEWITHSUNDEEP
javascriptreactjs
Exorcismus
Exorcismus

Reputation: 2482

How to render fontawesome as button in ReactJS

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?

Upvotes: 0

Views: 106

Answers (2)

N&#39;Bayramberdiyev
N&#39;Bayramberdiyev

Reputation: 3620

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.

Upvotes: 0

norbitrial
norbitrial

Reputation: 15166

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!

Upvotes: 0

Related Questions