Develop Reference

REACT: SELECT from MYSQL

i a new user and a new in React world. I need help to solve this situation about a Select with values from mysql DB.
I receive the values, but the select goes in infinite loop.
The error is surely in this file cause server.js works without problem!!
Really thanks for the help, and sorry if it could be a stupid question. I m studying react from one week and i have not found answers on internet
function FormAddMenu({ registerMenu }) {
const [nomeMenuReg, setNomeMenuReg] = useState("");
const [descrizioneMenuReg, setDescrizioneMenuReg] = useState("");
const [prezzoMenuReg, setPrezzoMenuReg] = useState("");
const [disponibilitaMenuReg, setDisponibilitaMenuReg] = useState("");
const [portataMenuReg, setPortataMenuReg] = useState("");
const [addMenu, setAddMenu] = useState({
portataMenuReg: "",
nomeMenuReg: "",
descrizioneMenuReg: "",
prezzoMenuReg: "",
disponibilitaMenuReg: "",
});
const [portate, setPortate] = useState({ value: "", label: "" });
const selectOptions = async () => {
Axios.post("http://localhost:3001/selectPortata").then((response) => {
// console.log("risposta:",response.data)
setPortate(
response.data.map((risp) => ({
...setPortate,
value: risp.value,
label: risp.label,
})),
);
});
};
selectOptions();
console.log("portate:", portate);
const submitHandler = (e) => {
e.preventDefault();
registerMenu(addMenu);
document.getElementById("addmenu").reset();
};
const handleCheckbox = (e) => {
console.log(e.target.checked);
if (e.target.checked === true) {
setAddMenu({ ...addMenu, disponibilitaMenuReg: 1 });
} else {
setAddMenu({ ...addMenu, disponibilitaMenuReg: e.target.value });
}
};
return (
<div className="container width85">
<h1>CREA IL MENU'</h1>
<form id="addmenu">
<div className="mb-3">
<label htmlFor="portataMenuReg" className="form-label">
PORTATA
</label>
<Select
options={portate}
onChange={(e) => setAddMenu({ ...addMenu, portataMenuReg: e.target.value })}
className="mb-3"
/>
</div>
<div className="mb-3">
<label htmlFor="nomeMenuReg" className="form-label">
NOME
</label>
<input
type="text"
onChange={(e) => setAddMenu({ ...addMenu, nomeMenuReg: e.target.value })}
className="form-control"
id="nomeMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<label htmlFor="descrizioneMenuReg" className="form-label">
DESCRIZIONE
</label>
<textarea
className="form-control"
onChange={(e) =>
setAddMenu({ ...addMenu, descrizioneMenuReg: e.target.value })
}
id="descrizioneMenuReg"
rows="3"
></textarea>
</div>
<div className="mb-3">
<label htmlFor="prezzoMenuReg" className="form-label">
PREZZO
</label>
<input
type="text"
className="form-control"
onChange={(e) => setAddMenu({ ...addMenu, prezzoMenuReg: e.target.value })}
id="prezzoMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<label htmlFor="disponibilitaMenuReg" className="form-label">
DISPONIBILITA'
</label>
<input
type="checkbox"
value="0"
className="htmlForm-control"
onChange={handleCheckbox}
id="disponibilitaMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<button type="submit" onClick={submitHandler} className="btn btn btn-danger">
AGGIUNGI AL MENU
</button>
</div>
</form>
</div>
);
}
export default FormAddMenu;

Wrap the selectOptions(); call in an useEffect (since loading data and mutating state based on it is a side effect).
The empty dependency array (documented above) means the effect is only executed once on mount.
React.useEffect(() => {
selectOptions();
}, []);

I want to reset my form after clicking submit in reactjs. I have tried making another method. but it does not work

import React,{ useState} from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react';
import axios from 'axios';
const Create = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [checkbox, setCheckBox] = useState(false);
Here I am sending data to a mock api I created
const postData = () =>{
axios.post(`https://61cb2af8194ffe0017788c01.mockapi.io/fakeData`,{
firstName,
lastName,
checkbox
})
}
This is the method I created to reset the form but it does not work.
const resetForm = () => {
postData();
setFirstName(" ");
setLastName(" ");
setCheckBox(false);
}
This is my form where on click i am calling resetForm function but it is not resetting it
is sending the data but not resetting the form.
return(
<div>
<Form>
<Form.Field>
<label>First Name</label>
<input id="f1" placeholder='First Name' onChange={(e)=>setFirstName(e.target.value) } />
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input id="last1" placeholder='Last Name' onChange={(e)=>setLastName(e.target.value)}/>
</Form.Field>
<Form.Field>
<Checkbox id="c1" label='I agree to the Terms and Conditions' onChange={(e)=>setCheckBox(!checkbox)}/>
</Form.Field>
<Button type='submit' onClick={resetForm}>Submit</Button>
</Form>
<br></br>
<Button onClick={()=>navigate(-1)}>Go Back</Button>
</div>
)
}
export default Create;

Actually it will reset the form, the problem is you do not use Controlled Components to show the latest update value in UI
you should bind the value like this:
<input type="text" value={this.state.value} onChange={this.handleChange} />
You can refer the doc here:
https://reactjs.org/docs/forms.html

You can reset your form using the native form.reset() method.
const Create = () => {
const ref = React.useRef(null);
const resetForm = () => ref.current.reset();
return (
<div>
<Form ref={ref}>
<Form.Field>
<label>First Name</label>
<input id="f1" placeholder="First Name" onChange={(e) => setFirstName(e.target.value)} />
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input id="last1" placeholder="Last Name" onChange={(e) => setLastName(e.target.value)} />
</Form.Field>
<Form.Field>
<Checkbox
id="c1"
label="I agree to the Terms and Conditions"
onChange={(e) => setCheckBox(!checkbox)}
/>
</Form.Field>
<Button type="submit" onClick={resetForm}>
Submit
</Button>
</Form>
<br></br>
<Button onClick={() => navigate(-1)}>Go Back</Button>
</div>
);
};
export default Create;

For that, you have to set value property in your input. Try this
const Create = () => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [checkbox, setCheckBox] = useState(false);
const postData = () => {
console.log(firstName, lastName, checkbox);
};
const resetForm = () => {
postData();
setFirstName(" ");
setLastName(" ");
setCheckBox(false);
};
return (
<div>
<Form>
<Form.Field>
<label>First Name</label>
<input
id="f1"
placeholder="First Name"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input
id="last1"
placeholder="Last Name"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</Form.Field>
<Form.Field>
<Checkbox
id="c1"
label="I agree to the Terms and Conditions"
checked={checkbox}
onChange={(e) => setCheckBox(!checkbox)}
/>
</Form.Field>
<Button type="submit" onClick={resetForm}>
Submit
</Button>
</Form>
</div>
);
};

How to convert Class component to function on react

I have a customer feedback page or rather a contact page. There are a few in there. The page is written in JavaScript, React in the class component. I want to convert it to a functional component.
Below I will throw source code off the page
import React, { Component } from "react";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";
import axios from "axios";
class Contacts extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
subject: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
//console.log(`${e.target.name}:${e.target.value}`);
};
async handleSubmit(e) {
e.preventDefault();
const { name, email, subject } = this.state;
const form = await axios.post("/api/form", {
name,
email,
subject
});
}
render() {
return (
<Form className="col-xs-12 col-md-6" onSubmit={this.handleSubmit}>
<FormGroup>
<Label for="name">name:</Label>
<Input type="text" name="name" onChange={this.handleChange} />
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Email:</Label>
<Input type="email" name="email" onChange={this.handleChange} />
</FormGroup>
<FormGroup>
<Label for="subject">Subject:</Label>
<Input type="textarea" name="subject" onChange={this.handleChange} />
</FormGroup>
<Button>Submit</Button>
</Form>
);
}
}
export default Contacts;

1- first create a functional component like below:
2- add some hooks for the state:
3- Refactor functions in a new way:
4- At the end add the return section.
Finally you have something like this:
export default function Contacts() {
const [state, setState] = useState({
name: '',
email: '',
subject: '',
});
const handleChange = (e) => {
setState({ [e.target.name]: e.target.value });
//console.log(`${e.target.name}:${e.target.value}`);
};
const handleSubmit = async (e) => {
e.preventDefault();
const { name, email, subject } = state;
const form = await axios.post('/api/form', {
name,
email,
subject,
});
};
return (
<Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}>
<FormGroup>
<Label for="name">name:</Label>
<Input type="text" name="name" onChange={handleChange} />
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Email:</Label>
<Input type="email" name="email" onChange={handleChange} />
</FormGroup>
<FormGroup>
<Label for="subject">Subject:</Label>
<Input type="textarea" name="subject" onChange={handleChange} />
</FormGroup>
<Button>Submit</Button>
</Form>
);
}

const Contacts = (props) => {
const [name, setName] = useState();
const [email, setEmail] = useState();
const [subject, setSubject] = useState();
const handleChange = useCallback((setState, event) => {
setState(event.target.value);
}, []);
const handleSubmit = useCallback(async () => {
const response = await axios.post("/api/form", {
name,
email,
subject
});
console.log(response)
}, [name, email, subject]);
return (
<Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}>
<FormGroup>
<Label for="name">name:</Label>
<Input type="text" name="name" onChange={handleChange.bind(null, setName)} />
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Email:</Label>
<Input type="email" name="email" onChange={handleChange.bind(null, setEmail)} />
</FormGroup>
<FormGroup>
<Label for="subject">Subject:</Label>
<Input type="textarea" name="subject" onChange={handleChange.bind(null, setSubject)} />
</FormGroup>
<Button>Submit</Button>
</Form>
);
}

Not able to submit the data to firebase from contact form

import React, { useState } from 'react'
import styled from 'styled-components'
import Title from '../Components/Title'
import { InnerLayout, MainLayout } from '../Styles/Layout'
import Button from '../Components/Button'
import { db } from '../firebase';
function Contact() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [subject, setSubject] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
db.collection('mail').add({
name: name,
email: email,
subject: subject,
message: message,
})
.then(() => {
alert("Thank you for contacting. Your message has been sent successfully.");
})
.catch((err) => {
alert(err.message);
});
setName('')
setEmail('')
setSubject('')
setMessage('')
};
return (
<MainLayout>
<Title title={'Contact'} span={'Contact'} />
<ContactMain>
<InnerLayout className='contact-section'>
<div className="left-content">
<div className="contact-title">
<h4>Get In Touch</h4>
</div>
<form className="form" onSubmit={handleSubmit}>
<div className="form-field">
<label htmlFor="name">Enter Your Name</label>
<input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="email">Enter Your Email</label>
<input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="subject">Enter Your Subject</label>
<input type="text" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="text-area">Enter Your Message</label>
<textarea name="textarea" id="textarea" cols="30" rows="10" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
</div>
<div className="form-field f-button">
<Button title="Send Email" />
</div>
</form>
</div>
</InnerLayout>
</ContactMain>
</MainLayout>
)
}
I don't know why but I am not able to send the details to my firebase database. I am not able to find the issue in this code. I have copied the firebase database key and all in the firebase.js and then imported it in this contact.js and I then made the necessary changes in this. Still, I am not able to figure out the issue.

I would reset the form once the promise returned by add() is resolved.
const handleSubmit = (e) => {
e.preventDefault();
db.collection('mail').add({
name: name,
email: email,
subject: subject,
message: message,
}).then(() => {
// Reset those states here
setName('')
setEmail('')
setSubject('')
setMessage('')
alert("Thank you for contacting. Your message has been sent successfully.");
}).catch((err) => {
alert(err.message);
});
};
I guess your states are being reset to "" before the document is added as those setState methods would have ran before the doc was added.

Potentially because your button html within its the button component type is not set to 'submit' - I had the same issue I think which ended up being super simple.

React how to validate form before making postmutation

I have a react form to add some data to my database. I'm using Prisma and Graphql. I nested the mutations query to a button. so when the button is clicked the form is submitted but I'm wondering how I can first validate if all the field are filled in before submitting them?
Code:
render() {
const {id, firstname, lastname} = this.state
const UPDATE_MUTATION = gql`
mutation UpdateMutation($id:ID!, $firstname: String!, $lastname: String!) {
updateClient(id:$id, firstname: $firstname, lastname: $lastname) {
id
firstname
lastname
}
}
`
return (
<React.Fragment>
{
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-create-service"
centered
>
<Modal.Header closeButton >
<Modal.Title id="contained-modal-title-vcenter">Update service</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="flex flex-column mt3 client-row ">
<section className="form-group firstname">
<label>Firstname:</label>
<input
className="form-control "
value={firstname}
onChange={e => this.setState({ firstname: e.target.value })}
type="text"
placeholder="A name for the service"
/>
</section>
<section className="form-group lastname">
<label>Lastname:</label>
<input
className="form-control "
value={lastname}
onChange={e => this.setState({ lastname: e.target.value })}
type="text"
placeholder="The service cost"
/>
</section>
</div>
</Modal.Body>
<Modal.Footer>
<Mutation mutation={UPDATE_MUTATION}
variables={{id, firstname, lastname}}>
{/* onCompleted={() => this.props.history.push('/')} */}
{updateMutation =>
<button onClick={() => {updateMutation(); this.props.onHide() ; window.location.reload(false)} } className="btn submit">Update</button>
}
</Mutation>
</Modal.Footer>
</Modal>
}
</React.Fragment>

this a simple example :
const form = ()=>{
const [form,setForm] = useState({userName:"",password:""})
const [error,setError] = useState(false)
const validateForm = ()=>{
if(form.userName.length===0 && form.password.length===0)
return false
return true
}
const handleSubmit = ()=>{
if(validateForm()){
// do your stuff
}
else{
setError(true)
}
}
const handleChange =(e)=>{
if(error) setError(false);
const {target} = e
setForm(current=>({...current,[target.name]:target.value}))
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="userName" value={form.userName} onChange={handleChange}/>
<input type="password" name="password" value={form.password} onChange={handleChange}/>
<button type="submit">login</button>
{error && <p> UserName and password are required!<p>
</form>
)
}
this is it but you can save a lot of work by using react form library like formik with yup validation library