CODEWITHSUNDEEP
reactjscomponents
brad_fresh
brad_fresh

Reputation: 129

How to call a function with an argument after the submitting button in the popup window was clicked?

In React I created a component that holds a local state of popup. With a little help from onClick handler I change the local state to make the popup show up. The Popup component in turn contains confirm button. I would like to call a function deleteItem ONLY after the confirm button is clicked. But I don't get how to do it. In the code below the item gets deleted right after the popup shows up but it has to be deleted only if I press the button in the Popup component. If I understand correctely, the state of the components changes when the popup shows up and I have to get it khow to the MainComponent and only in this case the function deleteItem will be called.

import {deleteItem} from './item-reducer';

const MainComponent = ({items}) => {
 const [visiblePopup, setVisiblePopup] = useState(false);
    return( 
       {items.map(item => <li key={item.id}></li>
       <img onClick={() => {
         setVisiblePopup(true);
         deleteList(item.id) // I have to call this function after the button 
         in the Popup component is pressed
        }}
       />
    )}
   <Popup setVisiblePopup={setVisiblePopup}
  )
}

Popup.jsx
<div onClick={() => setVisiblePopup(false)} /> 
    Confirm
</div>

What I have to accomplish 1) I click img and popup shows up 2) I press 'Confirm' 3) function deleteItem is invoked 4)popup dissapeares.

Upvotes: 0

Views: 219

Answers (1)

Jordan Davis
Jordan Davis

Reputation: 398

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>
    )
}

Upvotes: 1

Related Questions