title: Reactstrap - How do I render the spinner properly within a button?
body: <p>I'm trying to achieve something like this using a button and spinners in Reactstrap</p>
  <pre><code>&lt;Button color=&quot;primary&quot; disabled&gt;
    Loading&lt;Spinner style={{ width: '0.5rem', height: '0.5rem' }} type=&quot;grow&quot; color=&quot;light&quot; /&gt;&lt;Spinner style={{ width: '0.5rem', height: '0.5rem' }} type=&quot;grow&quot; color=&quot;light&quot; /&gt;&lt;Spinner style={{ width: '0.5rem', height: '0.5rem' }} type=&quot;grow&quot; color=&quot;light&quot; /&gt;
  &lt;/Button&gt;
  </code></pre>
  <p>However, when I do this in code, the spinners in my button show as [object Object]. Any idea how to get it to render as spinners? I have tried enclosing the spinners in brackets and curly braces but nothing I have tried seems to work.</p>
  <pre><code>import React, { Component } from 'react';
  import { Form, FormGroup, Col, Button, Spinner } from 'reactstrap';
  
  export class MyComp extends Component {
    static displayName = MyComp.name;
  
    constructor(props) {
      super(props);
      this.state = {
        processing: false
      }
    }
  
    showProcessing = () =&gt; {
      this.setState({ processing: true });
    }
  
    hideProcessing = () =&gt; {
      setTimeout(this.setState({ processing: false }), 2000);
    }
  
    submitHandler = event =&gt; {
      event.preventDefault();
  
      event.target.className += &quot; was-validated&quot;;
  
      const isValid = event.target.checkValidity();
  
      if (isValid) {
        const data = new FormData(event.target);
        let currentComponent = this;
  
        fetch('/api/form-submit-url', {
          method: 'POST',
          body: data,
        })
          .then(function (response) {
            //resrtform
            currentComponent.hideProcessing();
            return response.json();
          })
          .then(function (data) {
            console.log(data);
          })
          .catch(function (err) {
            currentComponent.hideProcessing();
            console.log(&quot;Something went wrong!&quot;, err);
          });
      }
    }
  
    render() {
      return (
        &lt;Form onSubmit={this.submitHandler} noValidate action=&quot;/someurl&quot; method=&quot;POST&quot;&gt;
  
          &lt;FormGroup row&gt;
            &lt;Col sm={6} /&gt;
            &lt;Col sm={4}&gt;
              &lt;Button color=&quot;primary&quot; onClick={this.showProcessing} &gt;
                {!this.state.processing ? 'Sumbit' : 'Loading..' + (&lt;Spinner style={{ width: '0.7rem', height: '0.7rem' }} type=&quot;grow&quot; color=&quot;light&quot; /&gt;)}
              &lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
  
        &lt;/Form&gt;
      );
    }
  }
  </code></pre>