Question 255004 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I pass a prop to react-confirm-alert?

I’m trying to use react-confirm-alert (https://www.npmjs.com/package/react-confirm-alert) with a React component. The confirm alert will ask the user if they wish to delete a record YES/CANCEL. I can get the alert to pop up fine, display a static message, and delete a record with a hard-coded id.

I’d like to be able to pass an argument (i.e. a prop) to the react-confirm-alert component, where the argument is the record id pertaining to the button that has been clicked. I can’t see how to do so. Does anyone know how?

Here is a minimal working component that illustrates the issue.

import React from 'react';
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css'


export default function DeleteWithConfirmComponent() {

    // I would like to pass a parameter (id) into this function - but how?
    const deleteConfirm = ({ onClose }) => {
        const msg = 'Are you sure you want to delete the record with id = 123?'

        const handleClickedCancel = () => {
            onClose();
        };
        const handleClickedOK = () => {
            // TODO: delete the record with id 123.
            // Ideally, I would like to delete the record with the id argument that I pass to deleteConfirm.
            onClose();
        };
        return (
            <div className='react-confirm-alert'>
                <h3>DELETE A RECORD</h3>
                <div>{msg}</div>
                <div>
                    <button onClick={handleClickedOK}>OK</button>
                    <button onClick={handleClickedCancel}>CANCEL</button>
                </div>
            </div>
        );
    }      

    const onDeleteClicked = (e) => {
        const recordId = e.target.id;
        // I'd like to pass recordId to confirmAlert.
        confirmAlert({ customUI: deleteConfirm });
    };

    return <button id="123" onClick={onDeleteClicked}>Delete Record</button>;
}
Tags:

2

Answers


  1. 0

    You could use partial application to apply the recordId to the context of the deleteConfirm function.

    This would look like using a factory to create the deleteConfirm function:

    const createDeleteConfirm = ({ recordId }) => ({ onClose }) => {

    And then create the deleteConfirm function, applying the recordId, once you’ve got the recordId:

    confirmAlert({ customUI: createDeleteConfirm({ recordId }) });

    So the whole thing would look like:

    export default function DeleteWithConfirmComponent() {

    // I would like to pass a parameter (id) into this function - but how?
    const createDeleteConfirm = ({ recordId }) => ({ onClose }) => {
        const msg = 'Are you sure you want to delete the record with id = 123?'

        const handleClickedCancel = () => {
            onClose();
        };
        const handleClickedOK = () => {
            // TODO: delete the record with id 123.
            // Ideally, I would like to delete the record with the id argument that I pass to deleteConfirm.
            onClose();
        };
        return (
            <div className='react-confirm-alert'>
                <h3>DELETE A RECORD</h3>
                <div>{msg}</div>
                <div>
                    <button onClick={handleClickedOK}>OK</button>
                    <button onClick={handleClickedCancel}>CANCEL</button>
                </div>
            </div>
        );
    }      

    const onDeleteClicked = (e) => {
        const recordId = e.target.id;
        // I'd like to pass recordId to confirmAlert.
        confirmAlert({ customUI: createDeleteConfirm({ recordId }) });
    };

    return <button id="123" onClick={onDeleteClicked}>Delete Record</button>;
}

    Note: this doesn’t take into account optimising for re-renders since your example is omitting such concerns, i.e. potentially defining statically definable functions outside of the component render function.

    Login or Signup to reply.
  2. 0

    You can create the deleteConfirm a component of react. so just rename the deleteConfirm to DeleteConfirm as all component name starts with capital letter.

    Modify the onDeleteClicked function like:-

    const onDeleteClicked = (e) => {
let recordId1 = 6745436894;
confirmAlert({
    customUI: ({ onClose, recordId = recordId1 }) => {
        return (
            <DeleteConfirm onClose={onClose} recordId={recordId} />
        );
    }
});

    };

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search