Search code examples
reactjsbootstrap-4spinnerloading

Bootstrap 4 Loading Spinner on button in Reactjs

I am trying to add Bootstrap 4 Loading Spinner on a button. My button code is like below

<button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                          onClick={this.handleSubmit}>
   {
      this.state.toggle && this.props.value !== 'error'
           ? '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
    : ''
   }
   Create Account
  </button>

I am getting output like below

enter image description here

I included Bootstrap 4 in index.html file like below

<title>React App</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  </head>
Solution 
  • <button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                      onClick={this.handleSubmit}>
   {
      this.state.toggle && this.props.value !== 'error' &&
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
   }
   Create Account
</button>

    This will let react know that you want to render the <span> element instead of writing it as button label.