Добрый день. Сделал сайт все работает Но стоит мне скрыть Api ключи при помощи .env в разделе обратной связи после нажатия кнопки отправить сообщение перестает отправляться.
import React, { useState } from "react";
import axios from "axios";
import styles from "./Modpr.module.css";
const Mod = ({ closeModal }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [showThankYou, setShowThankYou] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
const serviceId = process.env.REACT_APP_SERVICE_ID;
const templateId = process.env.REACT_APP_TEMPLATE_ID;
const publicKey = process.env.REACT_APP_PUBLIC_KEY;
const data = {
service_id: serviceId,
template_id: templateId,
user_id: publicKey,
template_params: {
from_name: name,
from_email: email,
to_name: 'Web Wizard',
message: message,
}
};
try {
const res = await axios.post("https://api.emailjs.com/api/v1.0/email/send", data);
console.log(res.data);
setShowThankYou(true);
setName('');
setEmail('');
setMessage('');
} catch (error) {
console.error(error);
}
}
return (
<div className="modal">
<div className="modalContent">
{showThankYou ? (
<>
<p>Спасибо за обращение!</p>
<button onClick={closeModal}>Вернуться на главную</button>
</>
) : (
<form onSubmit={handleSubmit} className='emailForm'>
<div className={styles.formGroup}>
<input
type="text"
placeholder="Введите свое имя"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className={styles.formGroup}>
<input
type="email"
placeholder="Ваш Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className={styles.formGroup}>
<textarea
cols="30"
rows="10"
placeholder="(необязательно)"
value={message}
onChange={(e) => setMessage(e.target.value)}
>
</textarea>
</div>
<button type="submit">{isLoading ? "Идет отправка..." : "Отправить"}</button>
</form>
)}
{/* <button onClick={closeModal}>Закрыть</button> */}
</div>
</div>
);
}
export default Mod;
Простой