title: Cannot flush updates when React is already rendering
body: <p>I'm trying to show an alert when the API returns an error. For the alert window I'm using sweetalert2. In my render method I'm checking if the error message contains content. If it contains an error message I want to show the user an alert.</p>
  
  <p>When I submit the form, I make an API call. If it returns an error the reducer changes the store (state) and it renders the page again. </p>
  
  <p>Since I added the line below, I keep getting an error: </p>
  
  <pre><code>{saveLabelFetchError &amp;&amp; this.toggleAlertFailure(saveLabelFetchError)}
  </code></pre>
  
  <p>error:</p>
  
  <blockquote>
    <p>index.js:1375 Warning: unstable_flushDiscreteUpdates: Cannot flush updates 
     when React is already rendering.</p>
  </blockquote>
  
  <p>My component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { bindActionCreators } from "redux";
  
  import { saveLabelValueRequest } from "../../actions/labels";
  
  import Swal from "sweetalert2";
  import "./styles.css";
  import Button from "@kof/button";
  
  export class NewLabels extends Component {
    state = {
      labelInput: ""
    };
  
    inputChangedhandler = e =&gt; {
      this.setState({ labelInput: e.target.value });
    };
  
    toggleAlertFailure = message =&gt; {
      Swal.fire({
        type: "error",
        title: "Oops...",
        text: message
      });
    };
  
    saveLabel = event =&gt; {
      event.persist();
      event.preventDefault();
      Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, save it."
      }).then(result =&gt; {
        if (result.value) {
          const labelKeyUuid = this.props.labelKey.uuid;
          const labels = event.target.elements.labels.value;
          this.props.saveLabelValue(labelKeyUuid, labels);
        }
      });
    };
  
    render() {
      const { load, saveLabelFetchError } = this.props;
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.saveLabel}&gt;
            &lt;textarea onChange={this.inputChangedhandler}&gt;&lt;/textarea&gt;
            &lt;textarea&gt;&lt;/textarea&gt;
            &lt;Button onClick={() =&gt; load(this.state.labelInput)}&gt;Preview&lt;/Button&gt;
            &lt;Button type="submit"&gt;Save&lt;/Button&gt;
          &lt;/form&gt;
          {saveLabelFetchError &amp;&amp; this.toggleAlertFailure(saveLabelFetchError)}
        &lt;/div&gt;
      );
    }
  }
  
  NewLabels.propTypes = {
    saveLabelFetchError: PropTypes.string,
    isFetching: PropTypes.bool,
    labelKey: PropTypes.object,
    saveLabelValue: PropTypes.func
  };
  
  NewLabels.defaultProps = {
    saveLabelFetchError: "",
    labelKey: {},
    isFetching: false,
    saveLabelValue: () =&gt; {}
  };
  
  export default connect(
    state =&gt; ({
      saveLabelFetchError: state.labelsStore.saveLabelError,
      isFetching: state.labelsStore.isFetching,
      labelKey: state.labelsStore.labelKey
    }),
    dispatch =&gt;
      bindActionCreators(
        {
          saveLabelValue: saveLabelValueRequest
        },
        dispatch
      )
  )(NewLabels);</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to know why i keep getting this error message in my console. </p>