Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import { Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import nodemailer from 'nodemailer';
import firebase from './firebase';
export default class ContactForm extends React.Component {
constructor() {
super();
this.state = {
email: '',
name: '',
text: '',
sent: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const itemsRef = firebase.database().ref('items');
const item = {
title: this.state.email,
name: this.state.name,
text: this.state.text,
};
// push the object item in Firebase
itemsRef.push(item);
// update the states
this.setState({
email: '',
name: '',
text: '',
});
setTimeout(
this.setState({
sent: 'your message has been sent',
}),
3000
);
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
render() {
return (
<div className="CotactForm">
{this.state.sent !== '' ? this.state.sent : ''}
<Form onSubmit={this.handleSubmit}>
<FormGroup row>
<Label for="exampleEmail" sm={2}>
Email
</Label>
<Col sm={10}>
<Input
type="email"
name="email"
id="email"
required
placeholder="Your Email"
onChange={this.handleChange}
value={this.state.email}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="examplePassword" sm={2}>
Name
</Label>
<Col sm={10}>
<Input
type="text"
name="name"
id="name"
placeholder="Your Name"
required
onChange={this.handleChange}
value={this.state.name}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleText" sm={2}>
Your Content
</Label>
<Col sm={10}>
<Input
type="textarea"
name="text"
id="body"
required
onChange={this.handleChange}
value={this.state.text}
/>
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button>Submit</Button>
</Col>
</FormGroup>
</Form>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment