AlertDialog with typed confirmation message

[Etsija]

We are using AlertDialog with Delete/Cancel actions for deleting items from a DB. We would need to add another layer of security for deletion, similar to GitHub danger zone, where a dialog opens and you have to manually type the name of the repository for the Delete button to activate. How would I implement this with AlertDialog - or indeed, how would the component need to be changed in order to implement this?

I'm thinking of

• print out the name of the item which is about to get deleted in the dialog
• require the user to manually type the name in an input field
• check if the field matches with the name
• only then enable the Delete button

[codesfromshad]

Store the name of the action in React.useState(). Match the name of the action against the user input, which instructs the user to type down the action name. If the strings match, only then make a call to your API.