how do i call a function with an argument after the submitting button in the popup window was clicked?

If I understand you correctly this is what your looking for ?

const MainComponent = ({items}) => {
    const [modalState, setModalState] = useState({
        display: false,
        deleteItemId: undefined
    });

    const modalCallback = useCallback((deleteItemId)=>{
        deleteItem(deleteItemId)
        setModalState({ display: false, deleteItemId: undefined })
    },[])

    
    return( 
        <Fragment>
            {
                items.map(item => (
                    <Fragment>
                        <li key={item.id}></li>
                        <img onClick={() => setModalState({ display: true, deleteItemId: item.id })} />
                    </Fragment>
                ))
            }
            <PopupModal 
                visible={modalState.display} 
                deleteItemId={modalState.deleteItemId} 
                callback={modalCallback}
            />
        </Fragment>
    )
}


const PopupModal = ({ visible, deleteItemId, callback }) => {
    return (visible ? <div onClick={ () => callback(deleteItemId)}>Confirm</div> : null)
}

— OR —-

const MainComponent = ({items}) => {
    const [modalState, setModalState] = useState({
        display: false,
        deleteItemId: undefined
    });
    
    return( 
        <Fragment>
            {
                items.map(item => (
                    <Fragment>
                        <li key={item.id}></li>
                        <img onClick={() => setModalState({ display: true, deleteItemId: item.id })} />
                    </Fragment>
                ))
            }
            modalState.display ? <div onClick={() => [deleteList(modalState.deleteItemId), setModalState({display: false, deleteItemId: undefined}) ]}>Confirm</div> : null
        </Fragment>
    )
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top