Skip to content

Instantly share code, notes, and snippets.

@primaryobjects
Created November 1, 2017 19:03
Show Gist options
  • Star 84 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save primaryobjects/aacf6fa49823afb2f6ff065790a5b402 to your computer and use it in GitHub Desktop.
Save primaryobjects/aacf6fa49823afb2f6ff065790a5b402 to your computer and use it in GitHub Desktop.
A simple example of a confirm alert dialog in ReactJs / React.
<div className='delete-button' onClick={() => { if (window.confirm('Are you sure you wish to delete this item?')) this.onCancel(item) } } />
@it02Inartec
Copy link

Thanks! Very simple and very helpful. 😃

@sandeepkumardev-zz
Copy link

Thank you 💖🙏

@loknaths5
Copy link

thanks sir

@dsenam
Copy link

dsenam commented Feb 15, 2020

Worked to me , tks :)

@escalantedanny
Copy link

Gracias, Excelente Justo lo que buscaba

@ngohieutp
Copy link

Surprised !!!

@yaredweldegebrialreda
Copy link

Nice one

@miranalmehrab
Copy link

Really liked the way you think to solve problems!

@bikashgit007
Copy link

bikashgit007 commented May 28, 2020

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

@OmkarAmbhore
Copy link

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

@hascos
Copy link

hascos commented Aug 19, 2020

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

@ArjyaMj
Copy link

ArjyaMj commented Sep 27, 2020

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

@apratt957
Copy link

So nice and simple, thank you!

@ofek-rusaev
Copy link

This is great, thanks for sharing.

@binoibncode
Copy link

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

@MuhammedAnasm4444
Copy link

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

@hascos
Copy link

hascos commented May 16, 2021

@MuhammedAnasm4444 share your code

@xrsrke
Copy link

xrsrke commented May 21, 2021

💖🙏

@kinucris
Copy link

Ty for idea!

I'm use like this:

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

@ronaldmgdev
Copy link

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

@jukkamic
Copy link

Thank you!

@badrannn
Copy link

badrannn commented Nov 7, 2021

Thank YOU!

@sarakahaveci
Copy link

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

@MahfudW
Copy link

MahfudW commented Aug 1, 2022

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

@raju-hanumappa
Copy link

Thank you so much. Nice one.

@AlfonsoDubon
Copy link

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

@longpt2022
Copy link

thank u

@imueLx
Copy link

imueLx commented Nov 3, 2022

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

@sanryuu03
Copy link

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"

@Ginasonia98
Copy link

thankyou it's work for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment