I'm trying to call two functions immediately one after another when user clicks a button, but I am not able to do so.

In the first function, I am calling `handleChange()` method in which it sets the status value using `status: event.target.value`

And in the second function, it should execute `onSubmit()` method in which I am updating the status value in DB which previously `handleChange()` method sets.

Here is my code snippet:

```js
const handleChange = (event) => {
    setValues({ ...values, error: false, status: event.target.value });
};

console.log(status);    

const onSubmit = (event) => {
    event.preventDefault();
    setValues({ status:"", error: false, loading: true });
    console.log(status);
    updateOrderStatus(match.params.orderId, user._id, token, status).then(
      (data) => {
        if (data.error) {
          setValues({  error: data.error, success: false });
        } else {
          setValues({  status: "", success: true });
          console.log("STATUS:",status);
        }
      }
    )};

    const createOrderForm = () => {
      return (
        <button
            type="submit"
            onClick={handleChange,onSubmit}
            value="Cancelled"
            className={
              status === "Cancelled"
                ? "btn btn-primary mr-3"
                : "btn btn-outline-success mr-3"
            }
          >
            Cancelled
      )

```

Here are my screenshot and log files for what exactly I am trying for:

[Initially](https://i.stack.imgur.com/UhDtA.png)  

[After clicking on the Cancelled button it should change the status](https://i.stack.imgur.com/IqemF.png)