perform one function after another

I have created two functions, one that allows saving the data from an application and another that allows saving attachments, both are in different files the function saving the data from an application is in the file CreateRequirement2.jsx and saving attachments is in the file RightBar.jsx, what I want is that the function saving attachments is only executed when saving attachments is executed correctly.

CreateRequirement2.jsx:

function CreateRequirement2() {

    function handleSubmit(event, status) {
        event.preventDefault();

        const formData = {};
        const inputs = document.getElementsByName('out');
        for (let i = 0; i < inputs.length; i++) {
            // if any input have value empty, return error
            if (inputs[i].value === '') {
                toast.info('Preencha todos os campos do requerimento');
                return;
            }
            formData[inputs[i].name] = inputs[i].value;
        }

        setData(formData);
        console.log(formData);
        const requestBody = { data: formData, estado: status };
        console.log('+++++++++++++++' + requestBody);
        axios
            .post(`${API_BASE_URL}/requerimentos/9/13`, requestBody)
            .then(response => {
                if (status === 'SAVED') {
                    toast.info('O seu requerimneto foi guardado com sucesso');
                    navigate('/main');
                } else if (status === 'SUBMIT') {
                    toast.success('O seu requerimento foi subemtido com sucesso');
                    navigate('/main');
                }
            })
            .catch(error => {
                console.log(error);
            });
    }

    
    return (
                
                <Box sx={{ background: '#ffffff' }}>
                    <RightBar onSubmit={handleSubmit} />
                </Box>
            </Box>
            
        </>
    );
}

RightBar.jsx:

function RightBar(props) {

    const handleSave = async (event, status) => {
        event.preventDefault();
        if (fileList.length >= 1) {
            for (let i = 0; i < fileList.length; i++) {
                const formData = new FormData();
                formData.append('ANEXO_FILE', fileList[i]);
                try {
                    const response = await axios.post(`${API_BASE_URL}/anexos/50`, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    });
                    console.log(response);
                } catch (error) {
                    console.error(error);
                }
            }
        }
    };


    return (

                <Button
                    onClick={(event) => { props.onSubmit(event, 'SUBMITTED'); handleSave(event); }}
                    className={style.submitBtn}>
                    Submeter
                </Button>
            
        </>
    )
}

>Solution :

You can add a third parameter to your handleSubmit function like this

function handleSubmit(event, status, callback) {
...

// then call that 'callback' function where you want to do so
callback(event)
}

and pass your handleSave function to the handleSubmit function like this below

<Button onClick={(event) => { props.onSubmit(event, 'SUBMITTED', handleSave); }} className={style.submitBtn}> Submeter </Button>

hope this will help you, and if not, please get back to me, and I’ll try to figure that out with you 🙂

Thanks