React Send form data to email - reactjs

I am using create-react-app or my project. I created a form field where I store the data into the state. I would like to send the data as an email, and I'm lost on how to do so.
One of the problems is using create-react-app, I'm not sure where to find my router or server page in node.
Any help would be greatly appreciated.
import React, { Component } from 'react';
import { Button, Col, Grid, Row, Form, FormGroup, FormControl,
ControlLabel, Checkbox } from 'react-bootstrap';
export class Contact extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
message: ""
}
}
onChange = (e) => {
const state = this.state;
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { name, email, message } = this.state;
}
render() {
const { name, email, message } = this.state;
return(
<div>
<Grid>
<Row id="contactForm">
<Col xs={2}>
</Col>
<Col xs={8}>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup >
<Col componentClass={ControlLabel} sm={2}>
Name
</Col>
<Col sm={10}>
<FormControl required value={name} name="name" type="name"
placeholder="Name" onChange={this.onChange} />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl required value={email} name="email" type="email"
placeholder="Email" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col componentClass={ControlLabel} bsSize="lg" sm={2}>
Message
</Col>
<Col sm={10}>
<FormControl required value={message} name="message" componentClass="textarea" style={{ height: 200 }}
type="message" placeholder="Insert message here" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Flag as important</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button type="submit">
Send
</Button>
</Col>
</FormGroup>
</Form>
</Col>
<Col xs={2}>
</Col>
</Row>
</Grid>
</div>
)
}
}

Short answer is that You cannot send mail from the client. You will need to have a server to do so. If you have an api service that your React is consuming from, then it is very possible from there.

Related

Avoid form being reset

I am trying react-hook-forms. Is there anyway to not reset the form when submitting? Everytime I click submit form is reset.
import React from "react";
import { useForm } from "react-hook-form";
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Form,
FormGroup,
Label,
Input,
Button
} from "reactstrap";
const Insights = props => {
const { register, handleSubmit, watch } = useForm();
const GetSearchForm = () => {
const timePickerStyle = { width: 96, important: "true" };
const onSearch = data => {
console.log(data);
};
return (
<Form onSubmit={handleSubmit(onSearch)}>
<Row>
<Col>
<FormGroup>
<Label for="exampleEmail">Account Id</Label>
<Input
type="number"
name="account"
id="account"
placeholder="AccountId"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Email</Label>
<Input
type="email"
name="email"
id="email"
placeholder="Email"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="exampleEmail">xPage Id</Label>
<Input
type="number"
name="xpageid"
id="xpage"
placeholder="xPage Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Content Devider Id</Label>
<Input
type="number"
name="contentdevider"
id="contentdeviderid"
placeholder="Content Devider Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Custom Page Id</Label>
<Input
type="number"
name="custompage"
id="custompageid"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Service</Label>
<Input
type="text"
name="servicename"
id="servicename"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
</Row>
<Button>Submit</Button>
</Form>
);
};
return (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Insights
</CardHeader>
<CardBody>
<GetSearchForm></GetSearchForm>
</CardBody>
</Card>
</Col>
</Row>
);
};
export default Insights;
Because GetSearchForm is its own component, it gets created every time Insights is being rerendered.
You call the register function with the innerRef, but since the Input changed, and it is not the same component (newly created), its getting newly registered, which resets the state.
You either can move the useForm to the GetSearchForm and pass the data back up on submit or inline the whole form in Insights.

Unexpected use of 'event' on Login

I'm running a react-create-app and it's giving me the following errors on my below Login.js
./src/components/Login/Login.js
Line 6: 'handleClick' is not defined no-undef
Line 6: Unexpected use of 'event' no-restricted-globals
I've tried moving the handleClick event elsewhere in the js file but I continue to get the same error.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
handleClick(event)
{
const username = this.refs.username;
const password = this.refs.password;
const creds = { username: username.value.trim(), password: password.value.trim() };
this.props.onLoginClick(creds)
}
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
};
class Login extends Component {
render() {
const { errorMessage } = this.props;
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => this.handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
);
}
}
export default Login;
This ended up working:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
class Login extends Component {
render() {
const { errorMessage } = this.props;
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
}
function handleClick(event) {
const username = this.refs.username;
const password = this.refs.password;
const creds = { username: username.value.trim(), password: password.value.trim() };
this.props.onLoginClick(creds)
}
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
)
}
}
export default Login;
Moving handleClick inside the class fixes the error:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
};
class Login extends Component {
handleClick(event)
{
const username = this.refs.username;
const password = this.refs.password;
const creds = {
username: username.value.trim(),
password: password.value.trim()
};
this.props.onLoginClick(creds)
}
render() {
const { errorMessage } = this.props;
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => this.handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
);
}
}
export default Login;

How to make a form secure in redux-form

I am trying to use redux-form to build a credit card info form. However, when the user put in their card details on it, this pop up appear:
it said
Automatic credit card filling is disabled because this form does not use a secure connection
So my question is how to make a form secure using redux-form?
This is the code where I input the Payment redux-form
import React from 'react'
import { connect } from 'react-redux'
import PaymentView from './Payment.js'
import { reduxForm } from 'redux-form'
class Payment extends React.Component{
render() {
const { cardDetail } = this.props
return(<PaymentView onCheckOut={()=>console.log(cardDetail)} />)
}
}
Payment = reduxForm({
form: 'payment'
})(Payment)
const mapStateToProps = state => ({
cardDetail : state.form.payment ? state.form.payment.values : null
})
export default connect(mapStateToProps)(Payment)
This is the code for my Payment View
import React from 'react'
import { Panel, Button, Row, Col } from 'react-bootstrap'
import { TextInput } from '.Form'
export default ({onCheckOut})=> <div>
<Row>
<Col sm={12} md={8} lg={6} mdOffset={2} lgOffset={3}>
<Panel className="scb" header="bank transfer">
123-456-789
</Panel>
</Col>
</Row>
<Row>
<Col sm={12} md={8} mdOffset={2} lg={6} lgOffset={3}>
<Panel className="credit-card" header="credit card" >
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="creditCard"
label="credit card number"
type="text"
validateState="success"
controlId="credit-card"
value="12345678910111213"
placeholder="xxxx xxxx xxxx xxxx"
onChange={()=>{}}
helptext="16card number"
>
card number
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="name"
label="name"
type="text"
validateState="success"
controlId="name-card"
value="steve jobs"
placeholder="steve jobs"
onChange={()=>{}}
helptext="name on card"
>
Name on Card
</TextInput>
</Col>
</Row>
<Row>
<Col sm={8} md={8} lg={8}>
<h5>Expiry Date</h5>
</Col>
</Row>
<Row>
<Col sm={4} md={2} lg={2}>
<TextInput
name="month"
label="month"
type="text"
validateState="success"
controlId="month"
value="12"
placeholder="01"
onChange={()=>{}}
helptext="month"
>
month
</TextInput>
</Col>
<Col sm={4} md={2} lg={2}>
<TextInput
name="year"
label="year"
type="text"
validateState="success"
controlId="year"
value="18"
placeholder="18"
onChange={()=>{}}
helptext="year"
>
Year
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<TextInput
name="cvv"
label="cvv"
type="text"
validateState="cvv"
controlId="cvv"
value="123"
placeholder="123"
onChange={()=>{}}
helptext="cvv"
>
Cvv
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<Button bsStyle="primary" bsSize="large" block onClick={onCheckOut}>
Pay Now
</Button>
</Col>
</Row>
</Panel>
</Col>
</Row>
</div>
This is my TextInput
export const TextInput = (
{
type,
name,
placeholder,
helpTextArray,
status,
label,
value
}
) =>
<FormGroup
name="formBasicText"
validationState={status || null}
>
<ControlLabel>{label}</ControlLabel>
<Field
className="form-control"
id="formBasicText"
name={name}
component="input"
type={type}
placeholder={placeholder}
/>
<FormControl.Feedback />
{
value !== null?
helpTextArray.map( (helpText, key) =>
<HelpBlock key={key}>{helpText}</HelpBlock>
): null
}
</FormGroup>
This is most likely happening because the web page where that form is found is not served over HTTPS. Chrome automatically disables credit card information autofilling in those cases to stop your credit card information from falling into malicious hands through for example
Network traffic snooping (your credit card details being transmitted over a public Wi-Fi or other network in plaintext)
Man-in-the-Middle injection (somebody intercepting the non-encrypted HTTP traffic and injecting malicious code that captures credit card details)
Even if your page is served over HTTPS already, this issue might pop up if your page has content like images or external scripts that are served over a regular HTTP connection.
You have this message maybe because you don't use a 'HTTPS' connexion and your navigator detect that and disabled auto-filling ?

How to manage state with complex json object in react js

Below is the code I have so far, my state isn't working as expected with a bit complex object, I was able to work with a simple object with no nested objects in my state and its working as expected.
state assignment works fine if I don't use personalInfo or contactInfo inside the customer object and used all the properties and create simple customer object
import React, {PropTypes} from 'react';
import {Grid,Row,Col,Button,Label} from 'react-bootstrap';
import {connect} from 'react-redux';
import * as customerActions from '../../actions/customerActions';
import {bindActionCreators} from 'redux';
class AddCustomer extends React.Component{
constructor(props , context){
super(props , context);
this.state={
customer:{
personalInfo:{
firstName:"",
lastName:"",
dob:"",
ssn:""
},
contactInfo:{
address:"",
addressLine2:"",
city:"",
state:"",
zip:"",
phoneNumber:"",
emailAddress:""
}
}
};
this.handleChange = this.handleChange.bind(this);
this.onClickCancel = this.onClickCancel.bind(this);
this.onClickSave = this.onClickSave.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
customer: {
personalInfo:{
},
contactInfo:{
},
...this.state.customer,
[name]: value
}
});
console.log(this.state.customer);
}
onClickCancel(){
}
onClickSave(){
this.props.actions.createCustomer(this.state.customer);
}
render() {
return (
<div className="container-fluid">
<Grid>
<Row className="show-grid">
<Col xs={10} md={10}><b>ADD A LEAD</b></Col>
<Col xs={2} md={2}>
<Button>×</Button>
</Col>
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
<hr/>
</Col>
</Row>
<p><b>Personal Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>First Name*</Label></Row>
<Row><input name="personalInfo.firstName" type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Last Name*</Label></Row>
<Row><input name="personalInfo.lastName" type="text" value={this.state.customer.personalInfo.lastName} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>Date of Birth*</Label></Row>
<Row><input name="personalInfo.dob" type="text" value={this.state.customer.personalInfo.dob} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>SSN*</Label></Row>
<Row><input name="personalInfo.ssn" type="text" value={this.state.customer.personalInfo.ssn} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<p><b>Contact Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>Address</Label></Row>
<Row><input name="contactInfo.address" type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange}/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Address Line 2</Label></Row>
<Row><input name="contactInfo.addressLine2" type="text" value={this.state.customer.contactInfo.addressLine2} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>City</Label></Row>
<Row><input name="contactInfo.city" type="text" value={this.state.customer.contactInfo.city} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>State</Label></Row>
<Row><input name="contactInfo.state" type="text" value={this.state.customer.contactInfo.state} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>Zip</Label></Row>
<Row><input name="contactInfo.zip" type="text" value={this.state.customer.contactInfo.zip} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={4} md={4}>
<Row><Label>Phone Number</Label></Row>
<Row><input name="contactInfo.phoneNumber" type="text" value={this.state.customer.contactInfo.phoneNumber} onChange={this.handleChange}/></Row>
</Col>
<Col xs={4} md={4}>
<Row><Label>Email Address</Label></Row>
<Row><input name="contactInfo.emailAddress" type="text" value={this.state.customer.contactInfo.emailAddress} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<hr/>
</Row>
<Row className="show-grid">
<input className="pull-right" type="submit" onClick={this.onClickCancel} value="Cancel"/>
<input className="pull-right" type="submit" bsStyle="primary" onClick={this.onClickSave} value="Add"/>
</Row>
</Grid>
</div>
);
}
}
AddCustomer.propTypes={
actions:PropTypes.object.isRequired,
customer:PropTypes.array.isRequired
};
function mapStateToProps(state, ownProps) {
return{
customer:state.customer
};
}
function mapDispatchToProps(dispatch) {
return{
actions: bindActionCreators(customerActions,dispatch)
};
}
export default connect(mapStateToProps,mapDispatchToProps)(AddCustomer);
I'm not sure what's the unxepcted result do you receive, but I gues you may try something like this:
handleChange(type, name, event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
customer: {
...this.state.customer,
[type]:{
...this.state.customer[type],
[name]: value
}
}
});
console.log(this.state.customer);
}
...
render() {
...
<Row><input type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange.bind(this, 'personalInfo', 'firstName')} required="true"/></Row>
...
<Row><input type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange.bind(this, 'contactInfo', 'address')}/></Row>
...
}

How to pass information from a form into a function in react

I have a login model with the following login function:
login() {
console.log("Hello. It's Me")
axios.post('https://crossorigin.me/http://requestb.in/w21igbw2', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
//this.setState({ showModal: false });
})
.catch(function (error) {
console.log(error);
});
}
this is working fine, so how I do change this to send the actual data from the login form instead of just the hardcoded info in the function. The input in the login model this is what the full form looks like:
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
You can keep track of inputs in you state and when you fire API read the values from the state.
constructor(){
super()
this.state = {
email : null,
password : null,
}
onChangeEmail(){
this.setState({email: e.target.value});
}
onChangePassword(){
this.setState({password: e.target.value});
}
login(){
//api call with state values for id and pass
}
render(){
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email" onChange={this.onChangeEmail}/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password" onChange={this.onChangePassword}/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
}
}
P.S: I would strongly suggest using redux with react and using redux-form to handle you forms. It has been the best way I have found till now to handle forms in react-redux app. You can check it out here.

Resources