Bootstrap 4 Loading Spinner on button in Reactjs

Question

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

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>

Anand Popat · Accepted Answer · 2019-11-25 15:38:41Z

2

<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.

answered Nov 25, 2019 at 15:38

Anand Popat

1418 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abu abu Over a year ago

Thanks @Anand Popat. But why my way is not working ?

Anand Popat Over a year ago

Because you wrapped it inside single quotes and react will render anything inside quotes as text.

Collectives™ on Stack Overflow

Bootstrap 4 Loading Spinner on button in Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related