Reactstrap - How do I render the spinner properly within a button?

Question

I'm trying to achieve something like this using a button and spinners in Reactstrap

<Button color="primary" disabled>
  Loading<Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" />
</Button>

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.

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 = () => {
    this.setState({ processing: true });
  }

  hideProcessing = () => {
    setTimeout(this.setState({ processing: false }), 2000);
  }

  submitHandler = event => {
    event.preventDefault();

    event.target.className += " was-validated";

    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("Something went wrong!", err);
        });
    }
  }

  render() {
    return (
      <Form onSubmit={this.submitHandler} noValidate action="/someurl" method="POST">

        <FormGroup row>
          <Col sm={6} />
          <Col sm={4}>
            <Button color="primary" onClick={this.showProcessing} >
              {!this.state.processing ? 'Sumbit' : 'Loading..' + (<Spinner style={{ width: '0.7rem', height: '0.7rem' }} type="grow" color="light" />)}
            </Button>
          </Col>
        </FormGroup>

      </Form>
    );
  }
}

Answer 1

You are adding string to a JSX component. The following code works

<Button color="primary" onClick={this.showProcessing}>
  {!this.state.processing ? "Submit" : "Loading"} 
  {this.state.processing ? (
    <Spinner
      style={{ width: "0.7rem", height: "0.7rem" }}
      type="grow"
      color="light"
    />
  ) : null }
</Button>