We Keep Coding

I m trying to user useRef inside the JS class but really but i don't how to do that for example

import React from "react";
class postArticle extends Component {
//here I m using state to store the Out put from user
state = {
Article: {
id: null,
type: "Blog",
title: "Raj",
body: "reani ak Kahain bas pyar aur pahana",
author: "Suresh",
},
};
inputHandler = (e) => {
e.preventDefault();
const name = e.target.name;
const input = e.target.value;
console.log(name);
switch (name) {
case "type":
//Here I want to use useRef but I don't know how to declare it inside the class
this.setState({ Article: { type: input } });
break;
case "title":
//Here I want to use useRef but I don't know how to declare it inside the class
this.setState({ Article: { title: input } });
break;
case "article":
//Here I want to use useRef but I don't know how to declare it inside the class
this.setState({ Article: { body: input } });
console.log(this.state.Article);
break;
default:
console.log("wrong input");
break;
}
};
render() {
return (
<UserPostContainr>
<UserPostForm>
<div className="mb-3 text-center fw-1">
<UserPostLabel name="Type" />
<UserPostInput
type="text"
place="Type of article"
name="type"
change={this.inputHandler}
/>
</div>
<div className="mb-3 text-center fw-1">
<UserPostLabel name="Title" />
<UserPostInput
type="text"
place="Title of your Article"
name="title"
change={this.inputHandler}
/>
</div>
<div className="mb-3 text-center fw-1">
<UserPostLabel name="Write your article" />
<textarea
className="form-control"
name="article"
rows="3"
onChange={this.inputHandler}
></textarea>
</div>
<button className="btn btn-primary" onClick={this.postHandler}>
Submit
</button>
</UserPostForm>
</UserPostContainr>
);
}
}
so please guys help me to solve this problem

Form required section in react

there is required section in my form also I want to send successfully text after click of submit button. But problem is here when I click submit button, it shows successfully text no matter form is correct or not. Can you help me about that ? I am beginner :)
My react code here
import React, { Component } from "react";
export default class Form extends Component {
state = {
name: "",
surname: "",
phone: "",
email: "",
comments: "",
// isValid: true,
succesfully: ""
};
/* preventSending = async (e) => {
await this.setState({ [e.target.name]: e.target.value });
if (
this.state.name === "" ||
this.state.surname === "" ||
this.state.phone === "" ||
this.state.email === "" ||
this.state.comments === ""
) {
this.setState({ isValid: true });
} else {
this.setState({ isValid: false });
}
};*/
handleSubmit = (e) => {
this.setState({
succesfully: `${this.state.name} you have sent successfully `
});
};
render() {
return (
<div className="">
<form>
<label htmlFor="name">
Name :
<input
onChange={this.preventSending}
id="name"
name="name"
type="text"
required
/>
</label>
<br />
<label htmlFor="surname">
Surname :
<input
onChange={this.preventSending}
id="surname"
name="surname"
type="text"
required
/>
</label>
<br />
<label htmlFor="phone">
Phone :
<input
onChange={this.preventSending}
id="phone"
name="phone"
type="tel"
required
/>
</label>
<br />
<label htmlFor="email">
Email :
<input
onChange={this.preventSending}
id="email"
name="email"
type="email"
required
/>
</label>
<br />
<label htmlFor="textArea">
Comments :
<textarea
onChange={this.preventSending}
id="textarea"
name="comments"
required
/>
</label>
<br />
<button
type="submit"
// disabled={this.state.isValid}
onClick={this.handleSubmit}
>
Send details{" "}
</button>
</form>
<p>{this.state.succesfully}</p>
</div>
);
}
}
It says I have to add more details but I explained everything clear.

I have to go through your code and try to resolve the errors and get the proper output.
I see that you take the direct state object and update its value, I just corrected that part and also add one error flag in it, so that you can display one informational error message while you click the button without adding the data.
Apart from that, in your form, you take one button which has submit type.
As of now I simply update it with type=button, as type=submit will submit the form and redirect us to new URL.
Please let me know if it is useful to you or not.
here is my code
import React, { Component } from "react";
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
surname: "",
phone: "",
email: "",
comments: "",
// isValid: true,
succesfully: "",
error: "",
};
}
/* preventSending = async (e) => {
await this.setState({ [e.target.name]: e.target.value });
if (
this.state.name === "" ||
this.state.surname === "" ||
this.state.phone === "" ||
this.state.email === "" ||
this.state.comments === ""
) {
this.setState({ isValid: true });
} else {
this.setState({ isValid: false });
}
};*/
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value,
});
}
handleSubmit = (e) => {
if (
this.state.name !== "" &&
this.state.surname !== "" &&
this.state.phone !== "" &&
this.state.email !== "" &&
this.state.comments !== ""
) {
// check valid email or not with regex
const regexp = /^([\w\.\+]{1,})([^\W])(#)([\w]{1,})(\.[\w]{1,})+$/;
let isValidEmail = regexp.test(this.state.email) ? true : false;
if (isValidEmail) {
this.setState({
succesfully: `${this.state.name} you have sent successfully `,
error: "",
});
} else {
this.setState({
succesfully: "",
error: "Please add proper email",
});
}
} else {
this.setState({
succesfully: "",
error: "Please add proper data",
});
}
};
render() {
return (
<div className="">
<form>
<label htmlFor="name">
Name :
<input
onChange={(e) => this.handleChange(e)}
id="name"
name="name"
type="text"
value={this.state.name}
required
/>
</label>
<br />
<label htmlFor="surname">
Surname :
<input
onChange={(e) => this.handleChange(e)}
id="surname"
name="surname"
type="text"
value={this.state.surname}
required
/>
</label>
<br />
<label htmlFor="phone">
Phone :
<input
onChange={(e) => this.handleChange(e)}
id="phone"
name="phone"
type="tel"
value={this.state.phone}
required
/>
</label>
<br />
<label htmlFor="email">
Email :
<input
onChange={(e) => this.handleChange(e)}
id="email"
name="email"
type="email"
value={this.state.email}
required
/>
</label>
<br />
<label htmlFor="textArea">
Comments :
<textarea
onChange={(e) => this.handleChange(e)}
id="textarea"
name="comments"
value={this.state.comments}
required
/>
</label>
<br />
<button
// type="submit" // use this while you want to submit your form
type="button" // I use button to call handleSubmit method and display message
// disabled={this.state.isValid}
onClick={this.handleSubmit}
>
Send details
</button>
</form>
<p>{this.state.succesfully}</p>
<p>{this.state.error}</p>
</div>
);
}
}

I see that the function prevent sending that you created should work except you misplaced the isValid argument:
function ValidateEmail(email)
{
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
{
return true
}
return false
}
if (
this.state.name === "" ||
this.state.surname === "" ||
this.state.phone === "" ||
this.state.email === "" ||
this.state.comments === "" ||
!validateEmail(this.state.email)
) {
this.setState({ isValid: false });
} else {
this.setState({ isValid: true });
}
also uncomment disabled and isValid which should be false at the begginning:
// disabled={this.state.isValid}
// isValid = false

TypeError: validation is not a function in react.js

i'm trying to validate my form but always get the same error,
this the code of the form:
import React from "react";
import zxcvbn from "zxcvbn";
import logo from "../images/milinus.png";
import useForm from "./useForm";
function Signup() {
//function for validation of the submited data from the form
const validation = (values) => {
let errors = {};
//name validion
if (!values.name.trim()) {
errors.name = "Name is required";
}
//last name validtion
if (!values.lastname.trim()) {
errors.lastname = "Username is required";
}
//email validtion
if (!values.email.trim()) {
errors.email = "Email is required";
} else if (!/\S+#\S+\.\S+/.test(values.email)) {
errors.email = "Email is invalid";
}
//password validtion
if (!values.pass.trim()) {
errors.pass = "pass is required";
} else if (values.pass < 8) {
errors.pass = "PassWord need to be 8 characters or more";
}
//pass_conf
if (!values.pass_conf.trim()) {
errors.pass_conf = "pass_conf is required";
} else if (values.pass_conf == !values.pass) {
errors.pass_conf = "pass_conf is not match the Password";
}
return errors;
}
//custom hook for the form
const { hadleChange, values, handleSubmit, errors } = useForm(validation);
//function that conforme and indicaite the score of the pass word
const confirm_ps = (e) => {
const weak = document.querySelector(".weak");
const muduim = document.querySelector(".muduim");
const strong = document.querySelector(".strong");
const indicater = document.querySelector(".indicater");
let test = zxcvbn(e.target.value);
weak.setAttribute("style", "background-color:white");
muduim.setAttribute("style", "background-color:white");
strong.setAttribute("style", "background-color:white");
indicater.innerHTML = "";
console.log(test.score);
if (test.score === 0 || test.score === 1) {
if (e.target.value == !null) {
weak.setAttribute("style", "background-color:white");
muduim.setAttribute("style", "background-color:white");
strong.setAttribute("style", "background-color:white");
indicater.innerHTML = "";
}
console.log(e.target.value);
weak.setAttribute("style", "background-color:red");
indicater.innerHTML = "Weak";
} else if (test.score === 2 || test.score === 3) {
weak.setAttribute("style", "background-color:yellow");
muduim.setAttribute("style", "background-color:yellow");
indicater.innerHTML = "Meduim";
} else if (test.score === 4) {
weak.setAttribute("style", "background-color:green");
muduim.setAttribute("style", "background-color:green");
strong.setAttribute("style", "background-color:green");
indicater.innerHTML = "Strong";
}
};
return (
<div className="signup">
<div className="logo">
<img src={logo} alt="logo" />
<p>CREER UN COMPTE</p>
</div>
<div className="inputs">
<form className="form" onSubmit={handleSubmit}>
<div className="form-input">
<input
type="text"
name="name"
id="name"
placeholder="Nom"
value={values.name}
onChange={hadleChange}
/>
<p className="errorname">{errors.name}</p>
</div>
<div className="form-input ">
<input
type="text"
name="lastname"
id="lastname"
placeholder="Prenom"
value={values.lastname}
onChange={hadleChange}
/>
<p className="errorlastname"></p>
</div>
<div className="form-input">
<input
type="text"
id="username"
name="username"
placeholder="Username"
value={values.username}
onChange={hadleChange}
/>
<p className="errorusername"></p>
</div>
<div className="form-input">
<input
type="text"
id="email"
name="email"
placeholder="Email"
value={values.email}
onChange={hadleChange}
/>
<p className="erroremail"></p>
</div>
<div className="form-input">
<input
type="password"
id="pass"
name="pass"
placeholder="Mote de pass"
onChange={confirm_ps}
/>
<p className="errorpassword"></p>
</div>
<div className="form-input">
<input
type="password"
id="pass_conf"
className="conform"
name="pass_conf"
placeholder="conform le mote de pass"
value={values.pass_conf}
onChange={hadleChange}
/>
<p className="errorpass_conf"></p>
</div>
<div className="progress">
<span className="weak"></span>
<span className="muduim"></span>
<span className="strong"></span>
</div>
<div className="indicater"></div>
<div className="wornings">
<ul>
<li>Letters majuscule et minuscule</li>
<li>Plus de 8 characters</li>
<li>Contiens au moin un chiffers ou symbol</li>
</ul>
</div>
<button type="submite" className="signup-btn">
S'INSCRIRE AND ACCEPTER
</button>
</form>
</div>
</div>
);
}
export default Signup;
and this the code for the custom hook:
import { useState, useEffect } from "react";
const useForm = (callback,validation) => {
const { values, setValues } = useState({
name: "",
lastname: "",
username: "",
email: "",
pass: "",
pass_conf: "",
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
setErrors(validation(values));
setIsSubmitting(true);
};
useEffect(() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
}, [errors]);
return { handleChange, handleSubmit, values, errors };
};
export default useForm;
when i click on the submit button i get this errors:
TypeError: validation is not a function
22 |
23 | const handleSubmit = (e) => {
24 | e.preventDefault();
25 | setErrors(validation(values));
| ^ 26 | setIsSubmitting(true);
27 | };

You are setting two parameters for the hook - a callback function and validation function, and you are only passing the validation function
useForm(validation)
Please pass the callback function first and then that vaildation function

Because you pass only callback, not validation. You need decalre callBack and pass it into useForm
const callBack = () => {...};
useForm(callBack, validation);

Your useForm receives two params where you only give it one in the callback
const useForm = (callback,validation)
As a result, it got error here:
setErrors(validation(values));

I think your logic is somewhat not clear.
const { hadleChange, values, handleSubmit, errors } = useForm(validation);
Whatever, you passed validation as a callback here.
How about changing it as follow.
const useForm = (validation, callback) => {
To use the callback, you can define the callback here.
const { hadleChange, values, handleSubmit, errors } = useForm(validation, function() {... callback here});

Updating React Json Value Conditionally

I didn't figure out how to edit JSON data from a Put request.(it must be PUT request)
I created some inputs as you see and I need to find a way for updating/adding new credit-debit datas on JSON data differs by "to" and "from".
Also, if a "to" value added, it must decreased from total balance and if a "from" value added, it must be added to total balance.
I created a select box and an input for this (didin't connect between json and component)
My Updater component is as follows:
Component itself:
import React, { Component } from 'react';
import './Updater.scss';
import Axios from 'axios';
export default class Updater extends Component {
constructor(){
super();
this.state = {
amount: '',
description: '',
from: '',
to: '',
date: new Date()
}
}
onSubmitEdit = () => {
Axios.put('http://localhost:8080/api/balance/add',
{});
}
render() {
return (
<div className="updatercontainer">
<div className="updaterinputs">
<input className="amount" name="amount"
type="text" placeholder="Enter Amount"/>
<input className="description" name="description"
type="text" placeholder="Enter Description"/>
</div>
<div className="selectbox">
<select>
<option value="From">From</option>
<option value="To">To</option>
</select>
<input className="fromto" type="text"
name="fromto" placeholder="Enter From or To Name"/>
</div>
<div className="selectboxcontainer">
<div className="button-container">
<a href="#" onClick={this.onSubmitEdit}
className="button amount-submit">
<span></span>Update</a>
</div>
</div>
</div>
)
}
}

class Updater extends React.Component {
constructor() {
super();
this.state = {
amount: 0,
description: "",
_from: true,
_to: false,
date: new Date()
};
}
onAmountChange = e => {
this.setState({
amount: e.target.value
});
};
onDescriptionChange = e => {
this.setState({
description: e.target.value
});
};
onSelectTypeChange = e => {
console.log(e.target.value);
this.setState({
[e.target.value === "from" ? "_from" : "_to"]: true,
[e.target.value !== "from" ? "_from" : "_to"]: false
});
if(e.target.value !== "from" && (this.state.from != null || this.state.from !== "")) {
this.setState({
to: this.state.from,
from: null
});
} else if(e.target.value === "from" && (this.state.to != null || this.state.to !== "")){
this.setState({
from: this.state.to,
to: null
});
}
};
onFromToChange = (e) => {
this.setState({
[this.state._from ? "from" : "to"]: e.target.value
});
}
onSubmitEdit = () => {
Axios.put(
"https://httpbin.org/put",
{
...this.state,
},
{ headers: { "Content-Type": "application/json" } }
)
.then(response => {
// handle Response
})
.catch(err => {
// handle Error
});
};
render() {
return (
<div className="updatercontainer">
<div className="updaterinputs">
<input
onChange={this.onAmountChange}
className="amount"
name="amount"
type="text"
placeholder="Enter Amount"
/>
<input
onChange={this.onDescriptionChange}
className="description"
name="description"
type="text"
placeholder="Enter Description"
/>
</div>
<div className="selectbox">
<select onChange={this.onSelectTypeChange}>
<option value="from">From</option>
<option value="to">To</option>
</select>
<input onChange={this.onFromToChange} className="fromto" type="text"
name="fromto" placeholder="Enter From or To Name"/>
</div>
<div className="selectboxcontainer">
<div onClick={this.onSubmitEdit} className="button-container">
<a href="#" className="button amount-submit">
<span>Update</span>
</a>
</div>
</div>
</div>
);
}
}
Consider Reading More About Handling Inputs, Forms, Events
Working Sandbox!

you just need an onChange event to update the state based on the input values name
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
//On your inputs
<input
className="amount"
name="amount"
type="text"
placeholder="Enter Amount"
value={this.state.amount}
onChange={() => this.handleChange(e)}
/>

ReactJS - onSubmit Send email using Sendgrid or something similiar

ReactJs
I'm developing a simple form using ReactJS and I made a form and validations.
I made the form and handled the validations
But now I need to make it send an email with the form details using SendGrid or something similar
This is my code - App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
class App extends Component {
render() {
return (
<div className="App">
<h2>React Form - Jones Task</h2>
<Form />
</div>
);
}
}
export default App;
Form.Js
import React, { Component } from 'react';
import { FormErrors } from './FormErrors';
import './Form.css';
class Form extends Component {
constructor (props) {
super(props);
this.state = {
fname: '',
lname: '',
email: '',
phone: '',
formErrors: {fname: '', lname: '', email: '', phone: ''},
fnameValid: false,
lnameValid: false,
emailValid: false,
phoneValid: false,
formValid: false
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleUserInput = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value},
() => { this.validateField(name, value) });
}
validateField(fieldName, value) {
let fieldValidationErrors = this.state.formErrors;
let fnameValid = this.state.fnameValid;
let lnameValid = this.state.lnameValid;
let emailValid = this.state.emailValid;
let phoneValid = this.state.phoneValid;
switch(fieldName) {
case 'fname':
fnameValid = value.match(/^[a-zA-Z]*$/);
fieldValidationErrors.first = fnameValid ? '' : ' name is invalid. ';
fieldValidationErrors.first += value.length >= 2 ? '' : ' name should contain at least 2 chars. ';
break;
case 'lname':
lnameValid = value.match(/^[a-zA-Z]*$/) && value.length >= 2;
fieldValidationErrors.last = lnameValid ? '' : ' name is invalid. ';
fieldValidationErrors.last += value.length >= 2 ? '' : ' name should contain at least 2 chars. ';
break;
case 'email':
emailValid = value.match(/^([\w.%+-]+)#([\w-]+\.)+([\w]{2,})$/i);
fieldValidationErrors.email = emailValid ? '' : ' is invalid. ';
break;
case 'phone':
phoneValid = value.length == 10;
fieldValidationErrors.phone = phoneValid ? '' : ' should contain 10 digits exactly. ';
fieldValidationErrors.phone += value.match(/^\d+$/) ? '' : ' should contain numbers only. ';
break;
default:
break;
}
this.setState({formErrors: fieldValidationErrors,
fnameValid: fnameValid,
lnameValid: lnameValid,
emailValid: emailValid,
phoneValid: phoneValid
}, this.validateForm);
}
validateForm() {
this.setState({formValid: this.state.fnameValid && this.state.lnameValid && this.state.emailValid && this.state.phoneValid});
}
errorClass(error) {
return(error.length === 0 ? '' : 'has-error');
}
handleSubmit(event) {
const sgMail = require('#sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
to: 'avivday#gmail.com',
from: 'avivday#gmail.com',
subject: 'JonesForm',
text: 'and easy to do anywhere, even with Node.js',
html: '<strong>and easy to do anywhere, even with Node.js</strong>',
};
sgMail.send(msg);
event.preventDefault();
}
render () {
return (
<form className="demoForm" onSubmit={this.handleSubmit}>
<div className="panel panel-default">
<FormErrors formErrors={this.state.formErrors} />
</div>
<br />
<div className={"form-group ${this.errorClass(this.state.formErrors.fname)}"}>
<input type="text" className="form-control" name="fname"
placeholder="First Name"
value={this.state.fname}
onChange={this.handleUserInput} />
</div>
<br />
<div className={"form-group ${this.errorClass(this.state.formErrors.lname)}"}>
<input type="text" className="form-control" name="lname"
placeholder="Last Name"
value={this.state.lname}
onChange={this.handleUserInput} />
</div>
<br />
<div className={"form-group ${this.errorClass(this.state.formErrors.email)}"}>
<input type="email" required className="form-control" name="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleUserInput} />
</div>
<br />
<div className={"form-group ${this.errorClass(this.state.formErrors.phone)}"}>
<input type="text" className="form-control" name="phone"
placeholder="Phone Number"
value={this.state.phone}
onChange={this.handleUserInput} />
</div>
<br/>
<button type="submit" disabled={!this.state.formValid}>Submit</button>
</form>
)
}
}
export default Form;
On submit, nothing happens.
I did echo the enviorment on node.js command prompt
Thank you!