title: How call two functions one after another onClick in reactjs. Both functions are async
body: <p><em>How can I call two functions onClick one after another</em></p>
  <p>My code is as follows:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  
  import { Modal, Button } from &quot;react-bootstrap&quot;;
  
  const DeleteModal = ({
    show,
    handleClose,
    deleteModalData: { type, id },
    deleteFn,
    loading,
    dishData,
    setDishData,
  }) =&gt; {
    const removeIngredient = async () =&gt; {
      let restIngredients = dishData.ingredients.filter(
        (ingredient) =&gt; ingredient.ingredient_id !== id
      );
  
      setDishData({ ...dishData, ingredients: [...restIngredients] });
    };
  
    return (
      &lt;Modal show={show} onHide={handleClose}&gt;
        &lt;Modal.Header closeButton&gt;
          &lt;Modal.Title&gt;Delete {type}&lt;/Modal.Title&gt;
        &lt;/Modal.Header&gt;
        &lt;Modal.Body&gt;Are you sure you want to delete this {type}?&lt;/Modal.Body&gt;
        &lt;Modal.Footer&gt;
          &lt;Button variant=&quot;outline-secondary&quot; onClick={handleClose}&gt;
            No
          &lt;/Button&gt;
          &lt;Button
            variant=&quot;primary&quot;
            onClick={() =&gt; {
              removeIngredient();
              deleteFn();
            }}
            disabled={loading}
          &gt;
            Yes {loading ? &quot;...&quot; : null}
          &lt;/Button&gt;
        &lt;/Modal.Footer&gt;
      &lt;/Modal&gt;
    );
  };
  
  export default DeleteModal;
  
  </code></pre>
  <p>in the parent component of the above component I have defined the props  deleteFn and setDishData as follows:</p>
  <p><strong>deleteFn</strong></p>
  <pre class="lang-js prettyprint-override"><code>
    
    const deleteFn = () =&gt; {
      saveIngredients();
    };
  
    const filteredIngredientData = () =&gt;
      /**
       * filteredIngredientData - filters out the fields (from ingredients object) that are required by the API
       */
      ingredients
        ?.reduce((acc, val) =&gt; {
          return [
            acc,
            {
              ingredient_quantity: val.ingredient_quantity,
              ingredient_id: val.ingredient_id,
              is_required: val.is_required,
            },
          ];
        }, [])
        .flat(Infinity);
  
    const [loadingSaveIngredients, setLoadingSaveIngredients] = useState(false);
    const [ingredientsUpdated, setIngredientsUpdated] = useState(false);
  
    const saveIngredients = () =&gt; {
      /**
       * saveIngredients - Upload ingredients with updated quantities if any
       */
      setLoadingSaveIngredients(true);
      axios({
        method: &quot;PUT&quot;,
        url: `${BASE_URL}/dishes/${props.match.params.id}/ingredients`,
        data: { ingredients: filteredIngredientData() },
      })
        .then((res) =&gt; {
          setLoadingSaveIngredients(false);
          setShowDeleteModal(false);
          setIngredientsUpdated(true);
        })
        .catch((err) =&gt; console.log(err));
    };
  
  </code></pre>
  <p><strong>setDishData</strong></p>
  <pre class="lang-js prettyprint-override"><code>const [dishData, setDishData] = useState({});
  </code></pre>
  <p>I have tried to use promise too, but no luck. Is there any simple way to do this?</p>
  <p><em>I know that I have to use async await somehow, but I am unable to understand how should I use it. Any help will be appreciated :)</em></p>