Send a value via EmailJs without using a form - reactjs

I want to send an EmailJs with two parameters, the email that comes from the form, and the let toysList, that comes from the localStorage(and converted into a string via .toString()). How can I do that? I know how to connect the email because is in the form, but I don't know where i should put the toysList that is a variable.
import React from "react";
import emailjs from "emailjs-com";
let toysList = window.JSON.parse(localStorage.getItem("cart")).toString();
function ClientSubmit() {
function sendEmail(e) {
e.preventDefault();
emailjs
.sendForm(
"...",
"...",
e.target,
"..."
)
.then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
e.target.reset();
alert(
"Email send successfully!"
);
}
return (
<div>
<h3>Give us your mail and we will give you the price of the items</h3>
<form onSubmit={sendEmail}>
<div className="col-4">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
name="email"
placeholder="email#example.com"
/>
</div>
<div className="mb-3 col-2 ">
<input
type="submit"
className="btn btn-primary"
value="Send"
></input>
</div>
</form>
</div>
);
}

Insert a hidden in the form containing the value of the toyList so when you submit the form the toyList will be there.
<form onSubmit={sendEmail}>
<div className="col-4">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
name="email"
placeholder="email#example.com"
/>
<input
type="hidden"
className="form-control"
name="toyList"
defaultValue={toyList}
/>
</div>
<div className="mb-3 col-2 ">
<input
type="submit"
className="btn btn-primary"
value="Send"
></input>
</div>
</form>

Related

Cannot do axios PUT request in Django REST+ React framework - Request failed with status code 400

When i try to update data in my Django SQLite database through reactJS it shows an error like this, but it works the last day fine
even though I didn't change any code here now it's now working and it shows error that I had mentioned below
PUT http://127.0.0.1:8000/employee/1 400 (Bad Request)
AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
// Update Employee
const updateEmployee = (id) => {
Axios.put("http://127.0.0.1:8000/employee/"+id, {
name: name,
age: age,
email: email,
designation: designation
});
console.log(Axios.put);
Swal.fire("Updated!", "", "success");
// window.location.reload();
};
return(
<>
<h1 className="text-left text-danger">Update Employee</h1>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="form-group">
<label>Name</label>
<input type="text" className="form-control" placeholder="Enter Name" defaultValue={data.name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="form-group">
<label>Age</label>
<input type="text" className="form-control" placeholder="Enter Age" defaultValue={data.age} onChange={(e) => setAge(e.target.value)} />
</div>
<div className="form-group">
<label>Email</label>
<input type="text" className="form-control" placeholder="Enter Email" defaultValue={data.email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className="form-group">
<label>Designation</label>
<input type="text" className="form-control" placeholder="Enter Designation" defaultValue={data.designation} onChange={(e) => setDesignation(e.target.value)} />
</div>
<div className="mt-2">
<button className="btn btn-primary" onClick={() => updateEmployee(data.id)}>Update</button>
<Link className="btn btn-danger mx-2" to="/">Cancel</Link>
</div>
</div>
</div>
</div>
</>
)

How to call a function in a Reusable component in React

Hi I am working on a React project in my project one button is coming soo many times. So I created one component for Button and I am reusing that component where ever I get a button. Now the problem is when I am trying to apply onClick function to that Button component, my function is not working so please help me to resolve this issue.
This is Button Component Button.js
import React from "react";
import "./Button.css";
const Button = () => {
return (
<div>
<button className="btn btn-primary">Show login button</button>
</div>
);
};
export default Button;
This is Button.css, I have written nothing in this
This is App.js
import React, { useState } from "react";
import Button from "./Button/Button";
import "./App.css";
const App = () => {
const [hideForm, setHideForm] = useState(false);
const showLoginForm = () => {
setHideForm(true);
};
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-4">
{hideForm ? (
<div className="loginform">
<form>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Enter email"
></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
></input>
</div>
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</form>
</div>
) : (
<div className="signupform">
<form>
<div className="form-group">
<label htmlFor="firstname">Firstname</label>
<input
type="text"
className="form-control"
id="firstname"
placeholder="Enter firstname"
></input>
</div>
<div className="form-group">
<label htmlFor="lastname">Lastname</label>
<input
type="text"
className="form-control"
id="lastname"
placeholder="Enter lastname"
></input>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Enter email"
></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
></input>
</div>
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</form>
</div>
)}
<div className="buttons mt-3">
<Button onClick={() => showLoginForm()}></Button>
</div>
</div>
</div>
</div>
);
};
export default App;
const Button = ({handleClick}) => {
return (
<div>
<button onClick={handleClick} className='btn btn-primary'>Show login button</button>
</div>
)
}
Use It like this:
<Button handleClick={()=>anyFunc()}/>
or
<Button handleclick={anyFunc}/>
``
You can pass the Parent's on click event to child as a props and when you click on the child component's button event that is being declared on the parent's component can be called. Here is how you can do it:
Code on the Parent Component:
const myClick =()=>{
// on click will be called here when button will be pressed
}
<Button onClick={this.myClick}></Button>
Code on the Child Component:
<button onClick={this.props.myClick}>Click Here</button>

I want to customize stripe form in my project in react

I want to create a payment form using stripe in react js and backend is in spring boot i am using formik to get form data and yup for form validation as i am new to react i need help in customizing stripe form
Right now i am doing something like this
<Formik
enableReinitialize={true}
initialValues={RecurringPaymentSchema}
validationSchema={RecurringPaymentValidationSchema}
onSubmit={({ setSubmitting, resetForm, setErrors }) => {
this.handleSubmit(resetForm, setErrors);
setSubmitting(false);
//resetForm();
}}
>
<Form>
<div className="py-2">
<div className="custom-control custom-radio">
<Field
className="custom-control-input"
name="monthly-plan"
type="radio"
value="monthly-subscription"
/>
<label className="custom-control-label" for="monthly-plan">
<strong>Monthly $9.99</strong>
<br />
<small className="text-muted">
Pay $9.99 every month and get access to all premium features.
</small>
</label>
</div>
<div className="custom-control custom-radio mt-3">
<Field
checked=""
className="custom-control-input"
name="annually-plan"
type="radio"
value="annual-subscription"
/>
<label className="custom-control-label" for="annually-plan">
<strong>Yearly $49.99</strong>
<span className="badge badge-primary ml-1">60% OFF</span>
<br />
<small className="text-muted">
Pay $49.99 every year and get access to all premium features.
</small>
</label>
</div>
</div>
<input id="api-key" type="hidden" value="${stripePublicKey}" />
<div className="form-group">
<label className="font-weight-medium" for="card-element">
Enter credit or debit card below
</label>
<div className="w-100">
{/* A Stripe Element will be inserted here. */}
<Elements stripe={stripePromise}>
<CardElement
id="card-element"
options={CARD_ELEMENT_OPTIONS}
onChange={this.handleError}
/>
</Elements>
</div>
</div>
<div className="form-group">
<Field
className="form-control"
id="email"
name="email"
placeholder="Email Address"
type="email"
/>
<p className="errors">
<ErrorMessage name="email" />
</p>
</div>
{/* Used to display Element errors. */}
<div
className="text-danger w-100"
id="card-errors"
role="alert"
></div>
<div className="form-group pt-2">
<button
className="btn btn-primary btn-block"
id="submitButton"
type="submit"
>
Pay With Your Card
</button>
</div>
</Form>
</Formik>
Now i want validation of stripe as well as my radio buttons or other form elements using yup
my schemas are
import * as Yup from 'yup';
export const RecurringPaymentSchema = {
monthlyPlan: '',
annuallyPlan: '',
email: '',
};
export const RecurringPaymentValidationSchema = Yup.object().shape({
email: Yup.string().required("Email can't be blank"),
});

React conditional divs with hooks

I am creating a signup form that will render differently depending on whether the person signing up chooses Post a project or Work on a project from the very first div in the form.
How can I render each div that follows in the form-group conditionally based on what is selected in the first div? I am using hooks and I have found that most examples are for the extends Component approach.
My form:
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
State:
const Signup = () => {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
studying: "",
skills: [""],
error: "",
success: "",
role: ""
});
const { name, email, password, studying, skills, success, error, role } = values;
handleChange():
const handleChange = name => event => {
setValues({ ...values, error: false, [name]: event.target.value });
};
You should first divide the signUp in two parts and then call second function based on value of "role" from state.
The idea is to return the divs from second function based on state of first input.
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
{this.renderInput()}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
renderInput() {
if (values.role === "post") {
return (
<div className="form-group">
<input onChange={handleChange("name")} type="text" placeholder="Name" className="form-control" value={name} />
</div>
<div className="form-group">
<input onChange={handleChange("email")} type="email" placeholder="Email" className="form-control" value={email} />
</div>
<div className="form-group">
<input onChange={handleChange("password")} type="password" placeholder="Password" className="form-control" value={password} />
</div>
<div className="form-group">
<input onChange={handleChange("studying")} type="text" placeholder="I'm studying..." className="form-control" value={studying} />
</div>
<div>
<div>{createInputs()}</div>
<button className="btn btn-outline-primary btn-sm mb-3" onClick={addSkill} type="text">
Add more skills
</button>
</div>
);
}
}
You want to test the role state value is truthy/falsey and render the rest of your form on that value.
const SignUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select
defaultValue='unselected' // set default value here
onChange={handleChange("role")}
className="form-control" // fix className here, class alone isn't correct in react
>
<option value='unselected'>I want to...</option>
<option value='post'>Post a project</option>
<option value='work'>Work on a project</option>
</select>
</div>
{!!role && (
<Fragment>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
</Fragment>
)}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);

Input text in react form component does not allow text entry

I'm very new to react, and following a tutorial, made this Registration form (I just changed Bootstrap html with Materialize)
import React, {Component} from 'react';
class Register extends Component {
constructor() {
super();
this.state = {
email: '',
password: '',
errors: {}
};
this.handleChange = this.handleChange.bind(this);
}
handleChange (e) {
this.setState({
[e.target.name] : e.target.value
});
}
render() {
return (
<div>
<div className="row">
<div className="col s10 m6 offset-s1 offset-m3 ">
<form className="col s12 myform">
<h3 className="center"Register </h3>
<div className="row">
<div className="input-field col s12">
<input
id="email"
type="email"
value={this.state.email}
onChange = {this.handleChange}
/>
<label htmlFor="email">Email</label>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<input
id="password"
type="password"
value={this.state.password}
onChange = {this.handleChange}
/>
<label htmlFor="password">Password</label>
</div>
</div>
<button className="btn mybtn waves-effect waves-light right" type="submit" name="action">Submit
<i className="mdi-content-send right"></i>
</button>
</form>
</div>
</div>
</div>
);
}
}
export default Register;
The problem is that I can not enter anything into the form and get no error in the console. So got really preplexed. Appreciate your hints.
As you have written:
handleChange (e) {
this.setState({
[e.target.name] : e.target.value // This line I mean.
});
}
So you just need to assign name prop to input tag because you have written e.target.name and your input name is available in the state but not available in input props.
So do it like this:
- Email input
<input
name="email"
id="email"
type="email"
value={this.state.email}
onChange = {this.handleChange}
/>
- Password input
<input
name="email"
id="email"
type="email"
value={this.state.email}
onChange = {this.handleChange}
/>
I hope it will be helped you and enjoy of react

Resources