title: How to call multiple function in react hooks
body: <p>Here I am using, to call Modal which when the user clicks the particular button it will show a multiple dropdown button and while updating the button it will call the Modal to ask why and the user will insert some data and it will update.
  <strong>i am using a react Hooks.</strong></p>
  
  <p>1.Main.js</p>
  
  <p><strong>for updating the multiple button</strong></p>
  
  <pre><code> const toggleMachine = (currentState, action) =&gt; {
      const nextState = machine.transition(currentState, action);
      if (currentState !== nextState.value) {
        send(ProjectStatus[nextState.value]);
        dispatch(updateTask({ ...projectEntity, status: ProjectStatus[nextState.value] }));
      }
    };
  </code></pre>
  
  <p>....</p>
  
  <pre><code> &lt;MachineModal
      onClose={() =&gt; setOpen(false)}
      open={open}
      onSubmit={() =&gt; toggleMachine(currentState)}
   /&gt;
  </code></pre>
  
  <p>2. MachineModal.js</p>
  
  <p><strong>to get the Task details according to id</strong></p>
  
  <pre><code> useEffect(() =&gt; {
      const getId = params.id;
      TaskHistoryApi.getTaskHistory(getId).then((response) =&gt; {
        setValues(response.data);
      })
        .catch((error) =&gt; {
          Notifier.error(error.response.data.title);
        });
    }, []);
  </code></pre>
  
  <p><strong>for updating the Tssk</strong></p>
  
  <pre><code> const updateTaskHistory = (e) =&gt; {
      e.preventDefault();
      const data = {
      ...
      };
      TaskHistoryApi.updateTaskHistories(data)
        .then((response) =&gt; {
          Notifier.success('Task History Updated Successfully');
          onClose();
        })
        .catch((error) =&gt; {
          Notifier.error(error.response.data.title);
        });
    };
  
   &lt;Dialog
        open={open}
        onClose={onClose}
        aria-labelledby="form-dialog-title"
        fullWidth
  
      &gt;
        &lt;DialogTitle&gt;
          Update Task History
  
  
        &lt;/DialogTitle&gt;
        &lt;DialogContent&gt;
          &lt;TextField
            margin="dense"
            type="text"
            label="Project ID"
            fullWidth
            name="projectId"
            onChange={onChange}
            value={values.projectId}
            disabled
          /&gt;
          &lt;TextField
            autoFocus
            margin="dense"
            type="text"
            label="Comment"
            fullWidth
            name="eventDetail"
            onChange={onChange}
            value={values.eventDetail}
  
          /&gt;
        &lt;/DialogContent&gt;
        &lt;DialogActions&gt;
          &lt;Button
            onClick={onClose}
            color="primary"
            variant="contained"
          &gt;
            Cancel
  
          &lt;/Button&gt;
          &lt;Button
            onClick={updateTaskHistory}
            color="primary"
            variant="contained"
          &gt;
            Submit
  
          &lt;/Button&gt;
        &lt;/DialogActions&gt;
      &lt;/Dialog&gt;
  </code></pre>
  
  <p>I have to update the Task History along with other stuff, so both need to be updated at the same time or vice versa, for now, it's updating only the Modal component not the Main.js</p>