A simple example of a confirm alert dialog in ReactJs / React.

react-confirm.js

<div className='delete-button' onClick={() => { if (window.confirm('Are you sure you wish to delete this item?')) this.onCancel(item) } } />

thanks sir

Worked to me , tks :)

Gracias, Excelente Justo lo que buscaba

Surprised !!!

Nice one

Really liked the way you think to solve problems!

You Can Try........
<button type="submit" class="btn btn-primary mb-5" onClick={() => { if (window.confirm('Are you sure you wish to Save the details ?')) this.onSave(item) } }>Save

cofirmAlertMessage = (successCount,errorCount) =>{
    confirmAlert({
        title: 'Upload Status',
        message: <ul>
                    <li style={{ color: 'green' }}>Your Customer Upload file has been processed.</li> 
                    <li style={{ color: 'green' }}>Total successful records are {successCount} and Total failure records are {errorCount}.</li>
                    <li style={{ color: 'green' }}>Please verify data under Recent Uploads tab.</li> 
                </ul> ,
        buttons: [
            {
                label: 'Ok',
                
            },
        ]
    })

how to set id for button plz reply

cofirmAlertMessage = (successCount,errorCount) =>{
    confirmAlert({
        title: 'Upload Status',
        message: <ul>
                    <li style={{ color: 'green' }}>Your Customer Upload file has been processed.</li> 
                    <li style={{ color: 'green' }}>Total successful records are {successCount} and Total failure records are {errorCount}.</li>
                    <li style={{ color: 'green' }}>Please verify data under Recent Uploads tab.</li> 
                </ul> ,
        buttons: [
            {
                label: 'Ok',
                
            },
        ]
    })

how to set id for button plz reply

onClick={(e) => { if (window.confirm('Are you sure you wish to delete {intent.id}')) deleteIntent(e, id) }}

This is the simplest solution that I found, Thanks a lot.

So nice and simple, thank you!

This is great, thanks for sharing.

Thanks, it's so simple and in single-line code.
We can also use SweetAlert2 - https://sweetalert2.github.io/#usage

But having some issues when working with useState hooks. I am only getting initial state but not updated state

@MuhammedAnasm4444 share your code

💖🙏

Ty for idea!

I'm use like this:

<DeleteIcon onClick={() => { window.confirm( 'Confirmar exclusão?', ) && deleteIncidente( row.id, ); }} />

onClick={ ()=> { window.confirm("Your message") && function/expression }}

Thank you!

Thank YOU!

thank you, this way, worked perfectly with my code!
onClick={() => { window.confirm( 'Are you sure you want to delete this Card?', ) && deleteCard(id) }}

from Indonesia, thank you so much. No style css but it works.

Thank you so much. Nice one.

thank you, this way, worked perfectly with my code! onClick={() => { window.confirm( 'Are you sure you want to delete this Card?', ) && deleteCard(id) }}

GENIAL!!! great work

thank u

Thank you, it works! and it's very simple

thank you, this way, worked perfectly with my code! onClick={() => { window.confirm( 'Are you sure you want to delete this Card?', ) && deleteCard(id) }}

thanks. tested Next js "v13.1.6"

thankyou it's work for me

Thank you very much, very easy to implement.