Prompt Title: React Form Submission.

Для отправки формы на почту в React можно использовать библиотеки или реализовать это самостоятельно.

Одним из вариантов является использование библиотеки "react-hook-form" в сочетании с библиотекой "nodemailer" для отправки электронных писем.

Пример кода:

javascriptCopy code
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import nodemailer from 'nodemailer';

const ContactForm = () => {
  const { register, handleSubmit, reset, errors } = useForm();
  const [successMessage, setSuccessMessage] = useState('');
  
  const onSubmit = async (data) => {
    const transporter = nodemailer.createTransport({
      host: 'smtp.gmail.com',
      port: 587,
      auth: {
        user: '[email protected]',
        pass: 'password'
      }
    });
    
    const message = {
      from: '[email protected]',
      to: '[email protected]',
      subject: 'Contact Form Submission',
      html: `
        <h3>Contact Details</h3>
        <ul>
          <li>Name: ${data.name}</li>
          <li>Email: ${data.email}</li>
          <li>Message: ${data.message}</li>
        </ul>
      `
    };
    
    try {
      await transporter.sendMail(message);
      setSuccessMessage('Your message has been sent!');
      reset();
    } catch (error) {
      console.error(error);
    }
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Name</label>
      <input name="name" ref={register({ required: true })} />
      {errors.name && <span>This field is required</span>}
      
      <label>Email</label>
      <input name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <span>This field is required and must be a valid email address</span>}
      
      <label>Message</label>
      <textarea name="message" ref={register({ required: true })} />
      {errors.message && <span>This field is required</span>}
      
      <button type="submit">Submit</button>
      
      {successMessage && <p>{successMessage}</p>}
    </form>
  );
};

export default ContactForm;

Здесь мы используем хук "useForm" из библиотеки "react-hook-form" для создания формы и регистрации полей. Затем мы создаем функцию "onSubmit", которая создает объект транспортировки и объект сообщения, используя библиотеку "nodemailer", и отправляет их на почтовый сервер. После успешной отправки мы устанавливаем состояние "successMessage" для отображения сообщения об успешной отправке.

Пожалуйста, обратите внимание, что вам необходимо заменить адрес электронной почты отправителя и получателя, а также учетные данные аутентификации в объекте транспортировки на свои собственные значения.