How to access field values in checkout via javascript

[sdorobdev]

I am writing a React/Javascript extension for the checkout page that will add a second Email contact field in order to get the user to enter the email address for the order twice. I want to compare the text in the Contact field that is rendered automatically by Shopify and in the new text field that the extension adds. If both fields are not the same, I will display a validation error.

I have the field and the validation error stuff working but I don't know how to extract the field of the Contact email address that is rendered automatically by the checkout page. Doing getElementById('email') is not allowed in React. Any help here would be appreciated.

[sdorobdev · Accepted solution]

For the other React noobies out there, I solved my problem by doing the following which automagically attaches to the email element. I can then just refer to 'email' to get the value.

const email = useEmail()