title: Bootstrap 4 Loading Spinner on button in Reactjs
body: <p>I am trying to add Bootstrap 4 Loading Spinner on a button. My button code is like below</p>
  
  <pre><code>&lt;button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                            onClick={this.handleSubmit}&gt;
     {
        this.state.toggle &amp;&amp; this.props.value !== 'error'
             ? '&lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;'
      : ''
     }
     Create Account
    &lt;/button&gt;
  </code></pre>
  
  <p>I am getting output like below</p>
  
  <p><a href="https://i.stack.imgur.com/o5yV9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5yV9.png" alt="enter image description here"></a></p>
  
  <p>I included Bootstrap 4 in <code>index.html</code> file like below</p>
  
  <pre><code>&lt;title&gt;React App&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
  
    &lt;/head&gt;
  </code></pre>