CODEWITHSUNDEEP
reactjsemailnodemailer
Vinny KB
Vinny KB

Reputation: 41

send email from react js contact form

I have a contact form in react js. I need to send the mail to the corresponding imputed mail id. iam new in react js. The code i have used is given below. Please help me , how to send mail from this contact form. Thank you in advance. The contact form uses mail id i need to send some text message to this mail id. 

import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, SubjectInput } from './';

interface Props {
    onSubmit: (data: EmailData) => Promise<any>;
}

type State = EmailData;

export class ContactForm extends React.Component<Props, State> {
    public state: State = {
        name: '',
        email: '',
        subject: '',
        message: '',
    };

    public render(): ReactElement {
        const { name, email, subject, message } = this.state;
        return (
            <>
                <h3 className='contact-form__title'> Send a Message </h3>

                    <form className='form' onSubmit={(event) => {event.preventDefault(); this.props.onSubmit(this.state);}}>
                    <NameInput onChange={this.handleInputChange} value={name} />
                    <EmailInput onChange={this.handleInputChange} value={email} />
                    <SubjectInput onChange={this.handleInputChange} value={subject} />
                    <MessageInput onChange={this.handleInputChange} value={message} />
                    <div className='contact-form__btn-wrapper'>
                        <button className='contact-form__submit'> Submit</button>
                    </div>
                </form>
            </>
        );
    }

    private handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
        const { value, name } = event.target;
        this.setState({ [name]: value } as any);
    };
    handleInputChange = (name) => ({ target }) => {
    this.setState((prevState) => ({
    ...prevState,
    [name]: target.value
    });
    }
    private onSubmit = async (e: FormEvent): Promise<void> => {
        try {
            e.preventDefault();
            await this.props.onSubmit(this.state);
            this.setState({ name: '', email: '', subject: '', message: '' });
        } catch (e) {
            noop();
        } 
    };
  }
}

Upvotes: 0

Views: 14518

Answers (4)

OldManMcDonalds
OldManMcDonalds

Reputation: 1167

I'd recommend checking out a service like SendGrid and using transactional emails.

Upvotes: 0

Selvin
Selvin

Reputation: 58

You cannot send an email just using the frontend. You will have to prepare a server backend for that or otherwise use a third-party service.

Upvotes: 0

Mehadi Hassan
Mehadi Hassan

Reputation: 1220

You may achieve this using the npm library: senemail

senemail npm library link

var sendemail = require('sendemail')
var email = sendemail.email;

var person = {
  name : user inputed name,
  email: user inputed email,
  subject:"Subject of your Email"
}

email('welcome', person, function(error, result){
  console.log(' - - - - - - - - - - - - - - - - - - - - -> email sent: ');
  console.log(result);
  console.log(' - - - - - - - - - - - - - - - - - - - - - - - - - - - -')
})

Upvotes: 1

Kristi&#225;n Žuffa
Kristi&#225;n Žuffa

Reputation: 26

Unfortunately, just react wouldn't be enough to achieve this. See for example: https://blog.mailtrap.io/react-send-email/

Upvotes: 0

Related Questions