Home > front end >  How to call props function in axios response in react.js
How to call props function in axios response in react.js

Time:10-31

I want to when the yes button is clicked , Send both A request and close the modal.

my close modal function is props and my axios request is inside function .

how can I call props function in axios response ?

or how can I call a function and a props function when yes button clicked ?

function DeleteRow(props){

let {ErrorHandler} = useContext(ErrorContext);
let {DidUpdate} = useContext(AsideContext);

let data = `id=${props.status.rowId}`;
function DeleteRowReq(){

    axios.post('Acounting-API/API/expenses/delete.php' , data)
    .then(res => {

        if(res.data == 'id-error')
            ErrorHandler('An error has occurred , plz Contact support' , 'warning')

        else if(res.data == 'error')
            ErrorHandler('An error has occurred , plz Contact support' , 'warning')

        else if(res.data == 'success'){
            ErrorHandler('The desired row was successfully removed' , 'success')
            DidUpdate(`delete row with id : `);
            props.closeModal.bind(this , '' , 'delete_table_row_hide');
        }
        
    })
    .catch(e => console.log(e))

}

return(
    <div className={`${style.logout_modal_field} ${props.status.className}`} onClick={props.closeModal.bind(this , '' , 'delete_table_row_hide')}>
        <div className={style.main_field}>
            <div className={style.content}  onClick={e => e.stopPropagation()}>

                <p>Are you sure you want to delete this row ?</p>
                <div>
                    <button onClick={DeleteRowReq}>Yes</button>
                    <button onClick={props.closeModal.bind(this , '' , 'delete_table_row_hide')}>No</button>
                </div>

            </div>
        </div>
    </div>
)

}

CodePudding user response:

you can just call close props from finally statement.

function DeleteRow(props){

let {ErrorHandler} = useContext(ErrorContext);
let {DidUpdate} = useContext(AsideContext);

let data = `id=${props.status.rowId}`;
function DeleteRowReq(){

    axios.post('Acounting-API/API/expenses/delete.php' , data)
    .then(res => {

        if(res.data == 'id-error')
            ErrorHandler('An error has occurred , plz Contact support' , 'warning')

        else if(res.data == 'error')
            ErrorHandler('An error has occurred , plz Contact support' , 'warning')

        else if(res.data == 'success'){
            ErrorHandler('The desired row was successfully removed' , 'success')
            DidUpdate(`delete row with id : `);
            props.closeModal.bind(this , '' , 'delete_table_row_hide');
        }
        
    })
    .catch(e => console.log(e))
    .finally(()=>      props.closeModal.bind(this , '' , 
     'delete_table_row_hide');)

}
  • Related