Develop Reference

How create handleChange Function for array object in which on of property is <Select> element of 'react-select'

Getting Error using element of 'react-select' in onChange event set value.
I Have a array of Object :-
const [Product_Details, setProduct_Details] = useState([]);
useEffect(() => {
setProduct_Details([
{
index: Math.random(),
billId: "",
//This property is Select element of 'react-select'
prodId: "",
price: "",
prod_SrNo: "",
discount: "0",
Qty : "1",
Prod_Status: "NULL",
proData_warranty_In_Prcnt: "NULL",
Credit_Note: "NULL",
Replacement: "NULL",
},
]);
}, []);
i created handle Change function for this array object but 'prodId' doesnt changed
HandleChange()
const handleProductDetailsInputs = (index, e) => {
const Pdetails = [...Product_Details];
Pdetails[index][e.target.name] = e.target.value;
setProduct_Details(Pdetails);
};
return (
<>
<tr key={val.index}>
<td>
<Select
key={val.id}
required
class="form-select"
id={prodId}
data-id={idx}
name="prodId"
onChange={(e) => handleProductDetailsInputs(idx, e)}
options={Select_Product_Options}
/>
</td>
<td>
<input
key={val.id}
// {...register("price", { required: "Enter Price!" })}
required
placeholder="Price"
onChange={(e) =>
handleProductDetailsInputs(idx, e)
}
type="number"
name="price"
value={val.price}
id={price}
data-id={idx}
autoComplete="off"
className="form-control "
onKeyUp={PriceOnKeyUpForTotal}
/>
{/* {errors.price &&(<small className="text-danger">{errors.price.message}</small>)} */}
</td>
<td>
<input
key={val.id}
// {...register("prod_SrNo", { required: "Enter SrNo.!" })}
required
placeholder="SrNo."
onChange={(e) =>
handleProductDetailsInputs(idx, e)
}
type="text"
name="prod_SrNo"
value={val.prod_SrNo}
id={prod_SrNo}
data-id={idx}
autoComplete="off"
className="form-control"
// onKeyUp={CheckSrNoSameOnkeyUp}
/>
{ idx === array.length -1 && ProdSrnoSame ? (
<small className="text-danger" key={idx}>
Product SrNo Same!!!
</small>
) : null }
{/* {errors.prod_SrNo &&(<small className="text-danger">{errors.prod_SrNo.message}</small>)} */}
</td>
<td>
<input
key={val.id}
// {...register("discount", { required: "Enter Discount(%)!" })}
placeholder="discount (%)"
onChange={(e) =>
handleProductDetailsInputs(idx, e)
}
type="number"
name="discount"
value={val.discount}
id={discount}
data-id={idx}
autoComplete="off"
className="form-control "
onKeyUp={DiscntOnKeyUp}
/>
{/* {errors.discount &&(<small className="text-danger">{errors.discount.message}</small>)} */}
</td>
<td>
<input
key={val.id}
placeholder="Quantity"
onChange={(e) =>
handleProductDetailsInputs(idx, e)
}
type="number"
name="Qty"
value={val.Qty}
id={Qty}
data-id={idx}
autoComplete="off"
className="form-control "
/>
{/* {errors.discount &&(<small className="text-danger">{errors.discount.message}</small>)} */}
</td>
<td>
<select
key={val.id}
// {...register("proData_warranty", { required: "Select ProData Warranty!" })}
onChange={(e) =>
Check_Replacement_OnKeyUp(idx, e)
}
name="Prod_Status"
value={val.Prod_Status}
id={Prod_Status}
data-id={idx}
className="form-select "
// onKeyUp={Check_Replace_OR_CreditNote_OnKeyUp}
>
<option value="NULL">NULL</option>
<option value="ProDataWarranty">ProDataWarranty</option>
<option value="Replacement">Replacement</option>
</select>
</td>
</tr>
<>)
Help me to set only 'prodId' value onChange event, other properties changing very well getting error only in 'prodId' when select option, I think coz it take e.value and in handleProductDetailsInputs function i m passing e.target.value?
Help me!!!!

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();
}, []);

Get selected value dropdown React useSate

Originally, I designed this component to have a useState for each individual input. After realizing that this would not be the best approach for adding new inputs, I refactored to use only one useState. I'm able to get the values for all, but gender. I'm hoping someone could point me in the right direction.
Note: I realize it's not picking up the value because I'm not using person.gender. I went ahead and tried to add value={person.gender = "the value I want"} for each input.
const Forms = () => {
const [person, setPerson] = useState({
firstName: "",
lastName: "",
age: "",
gender: "",
email: "",
});
const [people, setPeople] = useState([]);
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setPerson({ ...person, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (person.firstName && person.lastName && person.age && person.email) {
const newPerson = {
...person,
id: new Date().getTime().toString(),
};
setPeople([...people, newPerson]);
setPerson({
firstName: "",
lastName: "",
age: "",
gender: "",
email: "",
});
}
};
console.log(person.gender);
return (
<article>
<h2>Forms</h2>
<form className="form">
<div className="form-control">
<label htmlFor="firstName">First Name:</label>
<input
type="text"
id="firstName"
name="firstName"
value={person.firstName}
onChange={handleChange}
/>
</div>
<div className="form-control">
<label htmlFor="lastName">Last Name:</label>
<input
type="text"
id="LastName"
name="lastName"
value={person.lastName}
onChange={handleChange}
/>
</div>
<div className="form-control">
<label htmlFor="age">Age:</label>
<input
type="text"
id="age"
name="age"
value={person.age}
onChange={handleChange}
/>
</div>
<div className="form-control">
<label htmlFor="gender">Gender:</label>
<select onChange={handleChange} id="gender">
<option name="gender" value="male">
Male
</option>
<option name="gender" value="female">
Female
</option>
<option name="gender" value="prefer not to answer">
prefer not to answer
</option>
</select>
</div>
<div className="form-control">
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={person.email}
onChange={handleChange}
/>
</div>
<button type="submit" className="btn" onClick={handleSubmit}>
Submit
</button>
</form>
{people.map((person) => {
const { firstName, lastName, age, gender, email, id } = person;
return (
<div className="item" key={id}>
<h4>
{firstName} {lastName}
</h4>
<span>{age}</span>
<span>{gender}</span>
<p>{email}</p>
</div>
);
})}
</article>
);
};
export default Forms;
Thanks,
Sean

You have to give the name attribute to the select element, not to its options
<select name="gender" onChange={handleChange} id="gender">

Try reading documentation in react about forms
https://reactjs.org/docs/forms.html
Another thing I think it e.target.value is not working in select form, also you shoud use independent state for every form input because in this layer you cause some effect and rerender

Clear Form Fields in React on Submit

I know this has probably been asked a few times, but I simply cannot figure out how to clear the form fields after submission of the form. It is working perfectly, but all of the data remains in the fields once I submit. I have tried the resetForm but that doesn't seem to be working for me.
Any help is greatly appreciated!
import React from "react";
import axios from "axios";
import '../ticket.min.css'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
class Ticket extends React.Component {
state = {
firstName: "",
lastName: "",
email: "",
content: "",
category: "",
urgency: "",
tickets: [],
}
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
this.setState({
firstName: '',
lastName: '',
email: '',
content: '',
category: '',
urgency: '',
})
};
addTicket = () => {
let url = "http://localhost:8080/tickets";
axios.post(url, {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
content: this.state.content,
category: this.state.category,
urgency: this.state.selectedOption
}).then(response => {
alert('Your ticket has been submitted');
});
};
getData = () => {
let url = "http://localhost:8080/tickets";
axios
.get(url)
.then((response) => this.setState({ tickets: response.data }));
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>First Name:</label>
<input type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange} />
<br></br>
<label>Last Name:</label>
<input type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange} />
<br></br>
<label>Email:</label>
<input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<br></br>
<label>
Select a Category:<br></br>
<select value={this.state.category} onChange={(e) => this.setState({ category: e.target.value })}>
<option value="hardware">Hardware</option>
<option value="software">Software</option>
<option value="internet">Internet</option>
<option value="other">Other</option>
</select>
</label>
<label>Please Describe Your Issue:</label>
<br></br>
<textarea value={this.state.content} name="content" onChange={this.handleChange} />
<label>
Select the Urgency Level:<br></br>
<input
type="radio"
name="selectedOption"
value="Urgent"
checked={this.state.selectedOption === "Urgent"}
onChange={this.handleChange}
/>
Urgent<br></br>
<input
type="radio"
name="selectedOption"
value="Normal"
checked={this.state.selectedOption === "Normal"}
onChange={this.handleChange}
/>
Normal<br></br>
<input
type="radio"
name="selectedOption"
value="Low Priority"
checked={this.state.selectedOption === "Low Priority"}
onChange={this.handleChange}
/>
Low Priority
</label>
<button
type="button"
className="btn btn-primary"
onClick={this.addTicket}
>
Submit
</button>
</form>
<h3>Pending Tickets</h3>
<button
type="button"
className="btn btn-primary"
onClick={this.getData}
>
Show Pending
</button>
<ul>
{this.state.tickets.map(p => (
<li key={p.id}>
<b>First Name:</b>{p.firstName} <b>Last Name:</b>{p.lastName} <b>Email:</b>{p.email} <b>Issue:</b>{p.content} <b>Category:</b>{p.category} <b>Urgency:</b>{p.urgency}
</li>
))}
</ul>
</div>
);
}
}
export default Ticket;

Netlify form dashboard doesn't display input type file

I'm building a simple website with Gatsby. The website has a form which contains some input fields type text and one input type file.
I'm using styled-component.
const initialState = {
firstName: "",
lastName: "",
email: "",
phoneNumber: "",
message: "",
cv: null,
linkedinUrl: "",
isSent: false,
validation: validator.valid(),
}
const [formData, setFormData] = useState({
...initialState,
})
const [isFormSubmitted, setIsFormSubmitted] = useState(false)
const handleInputChange = event => {
setFormData({
...formData,
[event.target.name]: event.target.value,
})
}
const handleFileLoad = e => {
setFormData({
...formData,
cv: e.target.files[0],
})
}
const handleSubmit = event => {
event.preventDefault()
// const { firstName, lastName, email, phoneNumber, siteWeb, message } = formData
const validation = validator.validate(formData)
setFormData({
...formData,
validation,
})
setIsFormSubmitted(true)
if (validation.isValid) {
const encode = data => {
console.log(data)
return Object.keys(data)
.map(
key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
)
.join("&")
}
fetch(event.target.action, {
method: "POST",
headers: { "Content-Type": "multipart/form-data" },
body: encode({ "form-name": title, job, ...formData }),
})
.then(() => setFormData({ ...initialState, isSent: true }))
.catch(error => alert(error))
}
}
const {
firstName,
lastName,
email,
phoneNumber,
linkedinUrl,
message,
validation,
} = formData
// if the form has been submitted at least once, then check validity every time we render
// otherwise just use what's in state
const copyData = { ...formData }
const formValidation =
isFormSubmitted && !formData.isSent
? validator.validate(copyData)
: validation
return (
<FormStyled
onSubmit={handleSubmit}
data-netlify="true"
name={title}
method="POST"
netlify-honeypot="bot-field"
>
<Spacer flex="1 1 50%">
<Input
type="text"
placeholder="Prénom"
value={firstName}
handleChange={e => handleInputChange(e)}
name="firstName"
required
fullWidth
id="firstName"
/>
<input type="hidden" name="form-name" value={title} />
<input
type="text"
value={job}
name="job"
id="job"
style={{ display: "none" }}
/>
<ValidationMessage isInvalid={formValidation.firstName.isInvalid}>
{formValidation.firstName.message}
</ValidationMessage>
</Spacer>
<Spacer flex="1 1 50%">
<Input
type="text"
placeholder="Nom"
value={lastName}
handleChange={e => handleInputChange(e)}
name="lastName"
required
fullWidth
id="lastName"
/>
<ValidationMessage isInvalid={formValidation.lastName.isInvalid}>
{formValidation.lastName.message}
</ValidationMessage>
</Spacer>
<Spacer flex="1 1 50%">
<Input
type="tel"
placeholder="Téléphone"
value={phoneNumber}
handleChange={e => handleInputChange(e)}
name="phoneNumber"
fullWidth
id="phoneNumber"
/>
<ValidationMessage isInvalid={formValidation.phoneNumber.isInvalid}>
{formValidation.phoneNumber.message}
</ValidationMessage>
</Spacer>
<Spacer flex="1 1 50%">
<Input
type="email"
placeholder="E-mail"
value={email}
handleChange={e => handleInputChange(e)}
name="email"
required
fullWidth
id="email"
/>
<ValidationMessage isInvalid={formValidation.email.isInvalid}>
{formValidation.email.message}
</ValidationMessage>
</Spacer>
<Spacer flex="1 1 auto">
<Button title="Télécharger votre CV" colors="primary">
<InputFile type="file" id="cv" onChange={handleFileLoad} name="cv" />
</Button>
</Spacer>
<Spacer flex="1 1 auto">
<Text>et / ou</Text>
</Spacer>
<Spacer className="linkedin-url">
<Input
type="url"
placeholder="Lien de votre profil linkedin"
value={linkedinUrl}
handleChange={e => handleInputChange(e)}
name="linkedinUrl"
required
fullWidth
id="linkedinUrl"
iconLeft={
<LogoLinkedin>
<img src={Lkd} alt="lien Linkedin" />
</LogoLinkedin>
}
></Input>
</Spacer>
<Spacer>
<Textarea
type="text"
placeholder="Votre message..."
value={message}
handleChange={e => handleInputChange(e)}
name="message"
required
fullWidth
id="message"
/>
<ValidationMessage isInvalid={formValidation.message.isInvalid}>
{formValidation.message.message}
</ValidationMessage>
</Spacer>
<SuccessMessage isSent={formData.isSent}>
Merci, votre message a bien été envoyé !
</SuccessMessage>
<Spacer textAlign="center">
<Button title="Envoyer" type="submit" colors="primary" />
</Spacer>
</FormStyled>
)
}
Below is the request payload when I send the file :
form-name=postuler&job=Tous&firstName=foo&lastName=bar&email=foo.bar%40gmail.com&phoneNumber=0102030405&message=foo%20bar%20baz&cv=%5Bobject%20File%5D&linkedinUrl=https%3A%2F%2Fwww.foobar.fr&isSent=false&validation=%5Bobject%20Object%5D&ignore_whitespace=false&allow_display_name=false&require_display_name=false&allow_utf8_local_part=true&require_tld=true
When I send the form, data are correctly displayed in Netlify form dashboard except the content of the input type file which remains empty. I want the content of the input type file to be displayed in Netlify dashboard (Regarding the doc, I assume it should be a link to access the file).
From what I understand looking carefully at the request payload, I'm sending cv=%5Bobject%20File, so I guess this the problem, because Netlify could not be able to retrieve the real content of the cv input.