On form submission, upload an image if there is one, then start update event What is the expected behavior?


If there is a file in the state (file != null), then startUploadImage(file) should be executed, followed by startUpdateEvent(eventId, state).
If there is no file (file === null) then only the startUpdateEvent(eventId, state) should be executed.


What is the problem I am encountering right now?

Currently I am struggling with writing a good piece of code, especially when it comes to conditional promises. In the code below you can see that I use some if / else (nested) methodology which leads to tremendously long code.

onSubmit = event =&gt; {
        event.preventDefault();
        if (
          (this.state,
          eventNameRegex.test(this.state.event_name) &amp;&amp;
            eventDescriptionRegex.test(this.state.event_description) &amp;&amp;
            priceRegex.test(this.state.ticket_price) &amp;&amp;
            eventDateRegex.test(this.state.event_date))
        ) {
          // check if image changed or not then continue
          this.props.handleLoading(true);

          if (this.state.file != null) {
            startUploadImage(this.state.file).then(response =&gt; {
              this.setState({ event_image: response.data });
              return this.props
                .startUpdateEvent(this.props.event.id, this.state)
                .then(() =&gt; {
                  this.props.handleLoading(false);
                  this.props.history.push("/events");
                })
                .catch(error =&gt; {
                  this.props.handleLoading(false);
                  this.setState({
                    error: error.status,
                    errorMessage: error.data
                  });
                });
            });
          } else {
            return this.props
              .startUpdateEvent(this.props.event.id, this.state)
              .then(() =&gt; {
                this.props.handleLoading(false);
                this.props.history.push("/events");
              })
              .catch(error =&gt; {
                console.log("error");
                this.props.handleLoading(false);
                this.setState({
                  error: error.status,
                  errorMessage: error.data
                });
              });
          }
        } else {
          this.setState({
            error: 400,
            errorMessage:
              "Please fill in all required fields with correct data. Please try again."
          });
        }
      };
I know nothing of react.js, so please forgive me if I missed something, but in a JS way I'd do it that way :

onSubmit = event =&gt; {
        event.preventDefault();
        //start with a dedicated part for testing values
        let fieldError="";
        if(!eventNameRegex.test(this.state.event_name))fieldError.="Name not correct.";
        if(!eventDescriptionRegex.test(this.state.event_description))fieldError.="Description not correct.";
        if(!priceRegex.test(this.state.ticket_price))fieldError.="Price not correct.";
        if(!eventDateRegex.test(this.state.event_date))fieldError.="Date not correct.";
        if(fieldError!=""){
          this.setState({
            error: 400,
            errorMessage:
              fieldError."Please fill in all required fields with correct data. Please try again."
          });
          return false;
        }
        // check if image changed or not then continue
        this.props.handleLoading(true);

        if (this.state.file != null) {
          startUploadImage(this.state.file).then(response =&gt; {
            this.setState({ event_image: response.data });
            return myUpdateEvent(this);
          });
        }
        else return myUpdateEvent(this);
      };

//when in doubt use a function ! here's hoping react.js can deal with it
function myUpdateEvent(myEvent){
  return myEvent.props.startUpdateEvent(myEvent.props.event.id, myEvent.state)
    .then(() =&gt; {
      myEvent.props.handleLoading(false);
      myEvent.props.history.push("/events");
    })
    .catch(error =&gt; {
      console.log("error");
      myEvent.props.handleLoading(false);
      myEvent.setState({
        error: error.status,
        errorMessage: error.data
      });
    });
}


Not tested but you get the gist.