Sunday, 5 March 2023

NextJS passing id of record to a function with a modal

I have the following NextJS component which renders a list of people .. I also have a delete button which opens a modal and asks if you want to delete said person, but i cant figure out how to pass the id to the function through the modal so its not working at all.

const peoples = [
    { id: 1, name: 'Scott'}
    { id: 2, name: 'Luke'}
    { id: 3, name: 'Hannah'}
    { id: 4, name: 'Reg'}
]

const Peoples = () => {
    const [confirmPersonDeleteModal, setConfirmPersonDeleteModal] = useState(false)

    const handleDeletePerson = () => {
        console.log('Deleting')
    }

    return (
        <>
            <ConfirmModal
                open={confirmPersonDeleteModal}
                onClose={() => setConfirmPersonDeleteModal(false)}
                title="Delete Person" 
                onConfirm={handleDeletePerson}
            >
                Are you sure you want to delete this person?
            </ConfirmModal>


            {peoples.map((people) => (
                <>
                    <p>{people.name} - {people.id}</p>
                    <a onClick={() => setConfirmPersonDeleteModal(true)}>Delete</a>

                </>
            ))}
        </>
    )
}

export default Peoples



from NextJS passing id of record to a function with a modal

No comments:

Post a Comment