title: React how to validate form before making postmutation
body: <p>I have a react form to add some data to my database. I'm using Prisma and Graphql. I nested the mutations query to a button. so when the button is clicked the form is submitted but I'm wondering how I can first validate if all the field are filled in before submitting them? </p>
  
  <p>Code: </p>
  
  <pre><code>
      render() {
          const {id, firstname, lastname} = this.state
          const UPDATE_MUTATION = gql`
     mutation UpdateMutation($id:ID!, $firstname: String!, $lastname: String!) {
     updateClient(id:$id, firstname: $firstname, lastname: $lastname) {
       id
       firstname
       lastname
     }
   }
       `
          return (
              &lt;React.Fragment&gt;
                  {
                              &lt;Modal
                                  {...this.props}
                                  size="lg"
                                  aria-labelledby="contained-modal-create-service"
                                  centered
                              &gt;
                                  &lt;Modal.Header closeButton &gt;
                                      &lt;Modal.Title id="contained-modal-title-vcenter"&gt;Update service&lt;/Modal.Title&gt;
                                  &lt;/Modal.Header&gt;
                                  &lt;Modal.Body&gt;
                                  &lt;div className="flex flex-column mt3 client-row "&gt;
                                  &lt;section className="form-group firstname"&gt;
                                      &lt;label&gt;Firstname:&lt;/label&gt;
                                      &lt;input
                                          className="form-control "
                                          value={firstname}
                                          onChange={e =&gt; this.setState({ firstname: e.target.value })}
                                          type="text"
                                          placeholder="A name for the service"
                                      /&gt;
                                  &lt;/section&gt;
                                  &lt;section className="form-group lastname"&gt;
                                      &lt;label&gt;Lastname:&lt;/label&gt;
                                      &lt;input
                                          className="form-control "
                                          value={lastname}
                                          onChange={e =&gt; this.setState({ lastname: e.target.value })}
                                          type="text"
                                          placeholder="The service cost"
                                      /&gt;
                                  &lt;/section&gt;
  
                              &lt;/div&gt;
                                  &lt;/Modal.Body&gt;
                                  &lt;Modal.Footer&gt;
                                      &lt;Mutation mutation={UPDATE_MUTATION}
                                          variables={{id, firstname, lastname}}&gt;
                                          {/* onCompleted={() =&gt; this.props.history.push('/')} */}
  
                                          {updateMutation =&gt;
  
                                              &lt;button onClick={() =&gt; {updateMutation(); this.props.onHide() ; window.location.reload(false)} } className="btn submit"&gt;Update&lt;/button&gt;
  
                                          }
                                      &lt;/Mutation&gt;
                                  &lt;/Modal.Footer&gt;
                              &lt;/Modal&gt;
  
                  }
              &lt;/React.Fragment&gt;
  
  
  </code></pre>