I've read through several posts that have had similar issues with ReCAPTCHA v2 but I'm still unable to figure out the issue.
I followed the npm and google documentation by installing npm install --save react-google-recaptcha and including
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script> within the body of the index.html and the page in which i want the reCaptcha to be shown.
But for some reason the reCaptcha will not show up on the page; with or without the code to make the reCaptcha functional.
Edit
The reCaptcha v2 was showing on the screen without changing anything with the code for a few moments and disappeared. I restarted VSCode and Github Desktop but the issue hasn't been resolved.
Contact.jsx
import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg';
import ReCAPTCHA from "react-google-recaptcha";
import REACT_APP_SITE_KEY from '../.env'
const Contact = () => {
const onChange = () => {
}
return (
<div className=''>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
....
<div className='w-2/3 pb-5'>
<img src={Stockpic15} alt="" />
</div>
<form className='flex flex-col justify-center items-center sm:space-y-8 mobile:space-y-10 mobile:text-lg tablet:text-2xl'>
<input className='contact-input' type='text' name='first-name' placeholder='Your First Name' required/>
<input className='contact-input' type='text' name='last-name' placeholder='Your Last Name' required/>
<input className='contact-input' type='email' name='email' placeholder='Your Email Address' required/>
<textarea className='border-black border-2 rounded-md block w-full resize' name="message" rows="4" placeholder='Message'></textarea>
<button type="submit" href="#_" className="relative inline-block text-lg group">
...
</button>
<ReCAPTCHA
sitekey={REACT_APP_SITE_KEY}
oncChange={onChange}
/>
</form>
</div>
</div>
)}
export default Contact
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</body>
</html>
