We Keep Coding

ReactJS - Creating form field components dynamically and then saving the data from those fields to an object on form submission

I am brand new to React and things are coming along nicely, but I am getting stuck really badly on this concept. I've been at this point for a couple of days now and I think my brain is just getting overwhelmed by all the new concepts.
I work in a job where I help customers implement some controls that the company sells in their projects. I work with our .NET desktop stuff mostly. My team is doing a side project to create what is basically a StrawPoll clone for the sake of learning React/Node/MongoDB and getting more experience with a full development life cycle since most of what we do is just little code snippets.
I've got some of the basic components set up, but I'm getting really confused when it comes to creating and working with dynamically created components. If someone could show me what to do or explain what to do I would appreciate it so much.
You can find the branch I'm working on here: https://github.com/TylerBarlock/gcCE-Survey/tree/poll-components-cont
The part I'm currently stuck on is in src/Components/Poll/PollCreate.js and PollCreateAnswerOption.js
PollCreate.js:
//Main component for poll creation
import React, { Fragment, useState, useRef } from "react";
import PollCreateAnswerOption from "./PollCreateAnswerOption";
const PollCreate = (props) => {
// const [enteredTitle, setEnteredTitle] = useState("");
// const [enteredDescription, setEnteredDescription] = useState("");
const [enteredAnswer, setEnteredAnswer] = useState("");
const [selectedPrivate, setSelectedPrivate] = useState("");
const [selectedMultiple, setSelectedMultiple] = useState("");
const [selectedLogin, setSelectedLogin] = useState("");
const [selectedIpcheck, setSelectedIpcheck] = useState("");
const enteredTitleRef = useRef();
const enteredDescriptionRef = useRef();
const enteredAnswerRef = useRef();
const titleChangeHandler = (event) => {
//setEnteredTitle(event.target.value);
};
const descriptionChangeHandler = (event) => {
//setEnteredDescription(event.target.value);
};
const answerOptionChangeHandler = (answer) => {
//setEnteredAnswer(answer);
};
const privateSelectedHandler = (event) => {
setSelectedPrivate(event.target.value);
};
const multipleSelectedHandler = (event) => {
setSelectedMultiple(event.target.value);
};
const loginSelectedHandler = (event) => {
setSelectedLogin(event.target.value);
};
const ipcheckSelectedHandler = (event) => {
setSelectedIpcheck(event.target.value);
};
const addAnswerOptionHandler = (event) => {
console.log("add answer clicked");
};
const deleteAnswerOptionHandler = (event) => {
console.log("delete clicked");
};
const onSubmitHandler = (event) => {
//cancel default form submit behavior (reloads page)
event.preventDefault();
const enteredTitle = enteredTitleRef.current.value;
const enteredDescription = enteredDescriptionRef.current.value;
//const enteredAnswer = enteredAnswerRef.current.value;
//object to hold all data about the new poll being created
const newPollData = {
title: enteredTitle,
description: enteredDescription,
answerOptions: [
{
id: enteredAnswer.id,
text: enteredAnswer.text,
},
],
options: {
private: selectedPrivate,
multiple: selectedMultiple,
login: selectedLogin,
ipcheck: selectedIpcheck,
},
};
//send the new poll data up to the Poll component
props.onSaveNewPoll(newPollData);
console.log(newPollData.title);
console.log(newPollData.description);
console.log(newPollData.answerOptions);
};
return (
<React.Fragment>
<form onSubmit={onSubmitHandler}>
<h2 className="mb-4 text-center">Create a Poll</h2>
<div className="text-left">
<div className="grid grid-cols-1 mb-4">
<h4 className="mb-2">Title</h4>
<input
type="text"
placeholder="Ask your question..."
onChange={titleChangeHandler}
ref={enteredTitleRef}
></input>
</div>
</div>
<div className="text-left">
<div className="grid grid-cols-1 mb-4">
<h4 className="mb-2">Description (optional)</h4>
<input
type="text"
placeholder="Describe the poll..."
onChange={descriptionChangeHandler}
ref={enteredDescriptionRef}
></input>
</div>
</div>
<div className="text-left">
<div className="grid grid-cols-1 mb-2 formtext">
<h4 className="mb-2">Answer Options</h4>
<PollCreateAnswerOption
onAnswerOptionChange={answerOptionChangeHandler}
ref={enteredAnswerRef}
onAnswerOptionDelete={deleteAnswerOptionHandler}
/>
<div className="flex">
<input
type="text"
className="mb-3 formtext w-full"
placeholder="Add an answer..."
onChange={answerOptionChangeHandler}
></input>
<button
className="btn-alt-onwhite p-1 h-9"
type="button"
onClick={deleteAnswerOptionHandler}
>
X
</button>
</div>
<div className="flex">
<input
type="text"
className="mb-3 formtext w-full"
placeholder="Add an answer..."
onChange={answerOptionChangeHandler}
></input>
<button
className="btn-alt-onwhite p-1 h-9"
type="button"
onClick={deleteAnswerOptionHandler}
>
X
</button>
</div>
</div>
</div>
<button
className="btn-primary mb-2"
type="button"
onClick={addAnswerOptionHandler}
>
Add Answer
</button>
<div className="text-left">
<div className="grid grid-cols-1 mb-6">
<h4 className="mb-2">Options</h4>
<div className="flex items-center">
<input
type="checkbox"
value=""
className="mx-3"
onChange={privateSelectedHandler}
></input>
<p>Private (only via direct link)</p>
</div>
<div className="flex items-center">
<input
type="checkbox"
value=""
className="mx-3"
onChange={multipleSelectedHandler}
></input>
<p>Allow multiple choices</p>
</div>
<div className="flex items-center">
<input
type="checkbox"
value=""
className="mx-3"
onChange={loginSelectedHandler}
></input>
<p>Voters must log in to vote</p>
</div>
<div className="flex items-center">
<input
type="checkbox"
value=""
className="mx-3"
onChange={ipcheckSelectedHandler}
></input>
<p>Check for duplicate IP</p>
</div>
</div>
</div>
<button type="submit" className="btn-primary mx-2">
Create Poll
</button>
<button type="button" className="btn-alt-onwhite mx-2">
Advanced Settings
</button>
</form>
</React.Fragment>
);
};
export default PollCreate;
PollCreateAnswerOption.js:
import React, { useState, useRef } from "react";
const PollCreateAnswerOption = React.forwardRef((props, ref) => {
const [enteredAnswerOption, setEnteredAnswerOption] = useState();
const answerOptionChangeHandler = (event) => {
setEnteredAnswerOption(event.target.value);
props.onAnswerOptionChange(event.target.value);
};
const deleteAnswerOptionHandler = (event) => {
props.onAnswerOptionDelete(event);
};
return (
<div className="flex">
<input
type="text"
className="mb-3 formtext w-full"
placeholder="Add an answer..."
onChange={answerOptionChangeHandler}
ref={ref}
></input>
<button
className="btn-alt-onwhite p-1 h-9"
type="button"
onClick={deleteAnswerOptionHandler}
>
X
</button>
</div>
);
});
export default PollCreateAnswerOption;
I'm OK with most of the form, but I'm confused on how I should generate 3 PollCreateAnswerOption components, allow the user to add and delete PollCreateAnswerOptions, and then put the data from each of them into my newPollData object.
I apologize in advance if the code is confusing or hard to read. There's a lot of things in here that are half-implemented from me trying all kinds of stuff. I tried to clean it up as much as I could.
There are currently both useState and useRef hooks in place because I don't know which I should use here and I was messing with both.
Thank you in advance to anyone who takes a look at this! I really appreciate the help, and I promise I did a lot of googling and reading before this point, but my brain is just fried at this point...

React JS fetch function not sending any HTTP request

This very same React APP was working till yesterday and suddenly today it stopped working completely. The fetch is not working at all, it not sending the HTTP request at all as observed the Network tab of Firefox. What is wrong with this? It was the same code that perfectly worked yesterday and suddenly today it stops to work.
As you can see that there is absolutely no response from the server. Why there is no response code against the POST request, as seen in the first line?
React Code:
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
export default function Login(props) {
const [email_id, setEmailId] = useState({ email_id: "" });
const [password, setPassword] = useState("");
const history = useHistory();
const submit = () => {
let finalOrder = JSON.stringify(email_id);
fetch("http://localhost:8080/Project/customer/login", {
method: "POST",
headers: { "Content-type": "application/json" },
body: finalOrder,
}).then((res) => {
if (res.ok) {
history.push("/AllProducts");
}
});
};
// sessionStorage.setItem("customer_id", JSON.stringify(result));
// alert(sessionStorage.getItem("customer_id"));
// history.push("/AllProducts");
const handleEmailChange = (e) => {
setEmailId({ email_id: e.target.value });
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
return (
<form>
<h3>Sign In</h3>
<div className="form-group d-flex w-25 p-3 position-relative">
<label>Email address : </label>
<input
type="email"
className="form-control"
placeholder="Enter email"
value={email_id.email_id}
onChange={handleEmailChange}
/>
</div>
<div className="form-group d-flex w-25 p-3">
<label>Password : </label>
<input
type="password"
className="form-control"
placeholder="Enter password"
value={password}
onChange={handlePasswordChange}
/>
</div>
<div className="form-group d-flex w-25 p-3">
<div className="custom-control custom-checkbox">
<input
type="checkbox"
className="custom-control-input"
id="customCheck1"
/>
<label className="custom-control-label" htmlFor="customCheck1">
Remember me
</label>
</div>
</div>
<button
onClick={submit}
className="btn btn-primary btn-block d-flex w-25 p-3"
>
Submit
</button>
</form>
);
}
What is this weird behavior? Can anyone help? #CrossOrigin("http://localhost:3000/") added in the JAVA controller.Thanks in advance.
PS: Getting perfect response in ARC.
Now it is giving the following error:

"Error in the console : Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource." got resolved automatically by adding type="button" to the button. Sounds weird but true.

How to write inside input after making it editable?

I Am populating values of my input field from JSON data what am getting from back-end, now there is an edit button on UI by on click on that button I am enabling my input field but not able to type inside as I am setting some value
I want to write inside the input once I have made them editable.
const { register, handleSubmit, errors } = useForm();
const [disabled, setdisabled] = useState(false);
const [editBtn, seteditBtn] = useState(true);
<form onSubmit={handleSubmit(onSubmit)}>
{editBtn === true && (
<div align="right">
<button
className="btn white_color_btn"
type="button"
onClick={edit}
>
Edit
</button>
</div>
)}
{editBtn === false && (
<button className="btn white_color_btn" type="submit">
Save
</button>
)}
<div className="row">
<div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
<input
type="text"
disable
id="firstName"
name="firstName"
value={dataItems.firstname}
disabled={disabled ? "" : "disabled"}
ref={register({ required: true })}
/>
{errors.firstname && (
<span className="text-danger">first name required</span>
)}
<br />
<label htmlFor="emp_designation">First name</label>
</div>
<div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
<input
type="text"
disabled
id="lastname"
name="lastname"
value={dataItems.lastname}
disabled={disabled ? "" : "disabled"}
ref={register({ required: true })}
/>
{errors.lastname && (
<span className="text-danger">last name required</span>
)}
<br />
<label htmlFor="lastname">Lastname</label>
</div>
</div>
</form>
On click of edit
const edit = () => {
setdisabled(true);
};
Code sandbox

You need to make your input as a controlled component and write onChange handlers which will update the state. This will allow you to edit the input field values. Demo
const [disabled, setdisabled] = useState(false);
const [name, setName] = useState(empData.item.name) // setting default name
const [lastname, setLastname] = useState(empData.item.lastname) // default lastname
const edit = () => {
setdisabled(true);
};
return (<div className="container-fluid">
<div align="right">
<button className="btn" onClick={edit}>
Edit
</button>
</div>
<div className="row">
<div>
<input
type="text"
disable
id="item.value"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
disabled={disabled ? "" : "disabled"}
/>
<br />
<label htmlFor="name">Name</label>
</div>
<div>
<input
type="text"
disabled
id={"lastname"}
value={lastname}
onChange={(e) => {
setLastname(e.target.value)
}}
disabled={disabled ? "" : "disabled"}
/>
<br />
<label htmlFor="lastname">Lastname</label>
</div>
</div>
</div>);

Your input is controlled by the value you are giving to it. ie: Its value is always for example empData.item.name.
And you are not providing a change handler to handle the change.
Try adding something like this:
function myChangeHandler(e){
setEditedValueSomeHow(e.target.value);
}
<input
// ...
onChange={myChangeHandler}
/>
Read more about uncontrolled components
PS: you should have had a warning message in your console like this one:
Edit:
You are using react-hook-form to manage your form but at the same time giving values to your inputs.
Please refer to this link to initialize your form values.
short story:
Remove value form your input.
Pass an object to useForm hook containing initial values.
const { register, handleSubmit, errors } = useForm({
defaultValues: {
firstName: "steve",
lastname: "smith"
}
});
Here is a working fork for your codesandbox

In order to make the input editable, you need to update a local state which controlls the input value. As suggested by you in the comments, you are using graphql to get the data, you can make use of useEffect to set the data in state and then on click of edit, update the localState
export default function App() {
const { register, handleSubmit, errors } = useForm();
const [disabled, setdisabled] = useState(true);
const [editBtn, seteditBtn] = useState(true);
const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
const [formData, setFormData] = useState({});
useEffect(() => {
setFormData(data);
}, [data]);
const edit = () => {
setdisabled(false);
seteditBtn(false);
};
const onSubmit = () => {
console.log(formData);
// submit data using formData state.
};
const handleChange = e => {
const name = e.target.name;
const value = e.target.value;
console.log(name, value);
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<div className="container-fluid">
<form onSubmit={handleSubmit(onSubmit)}>
{editBtn === true && (
<div align="right">
<button
className="btn white_color_btn"
type="button"
onClick={edit}
>
Edit
</button>
</div>
)}
{editBtn === false && (
<button className="btn white_color_btn" type="submit">
Save
</button>
)}
<div className="row">
<div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
<input
type="text"
id="firstname"
name="firstname"
onChange={handleChange}
value={formData.firstname}
disabled={disabled}
ref={register({ required: true })}
/>
{errors.firstname && (
<span className="text-danger">first name required</span>
)}
<br />
<label htmlFor="emp_designation">First name</label>
</div>
<div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
<input
type="text"
id="lastname"
name="lastname"
value={formData.lastname}
onChange={handleChange}
disabled={disabled}
ref={register({ required: true })}
/>
{errors.lastname && (
<span className="text-danger">last name required</span>
)}
<br />
<label htmlFor="lastname">Lastname</label>
</div>
</div>
</form>
</div>
);
}
Working mock demo

How to redirect to another port when using history.push?

I have a login/register app that is using a port 3000 and to_do_list app that using a port 3001. Login/register app is writting in react and to_do_list in node.js.
I would like to make a redirection to localhost:3001/todolist from localhost:3000/login (when I log in I would like to redirect a users to another page that using other port).
My login.js file looks like this:
import React, { Component } from 'react'
import { login } from './UserFunctions'
class Login extends Component {
constructor() {
super()
this.state = {
email: '',
password: '',
errors: {}
}
this.onChange = this.onChange.bind(this)
this.onSubmit = this.onSubmit.bind(this)
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
onSubmit(e) {
e.preventDefault()
const user = {
email: this.state.email,
password: this.state.password
}
login(user).then(res => {
if (res) {
this.props.history.push(`/todolist`)
}
})
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<form noValidate onSubmit={this.onSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
name="email"
placeholder="Enter email"
value={this.state.email}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
name="password"
placeholder="Password"
value={this.state.password}
onChange={this.onChange}
/>
</div>
<button
type="submit"
className="btn btn-lg btn-primary btn-block"
>
Sign in
</button>
</form>
</div>
</div>
</div>
)
}}export default Login
How to redirect users to localhost:3001/todolist from localhost:3000/login ?

The port is part of what defines the origin, so you can't change it with history.push. if you want to change that, you actually do have to load a new page from it.

React form will only update firstestore document when all inputs have been changed

My react form for updating profile data currently only interacts with firestore when all inputs have been changed.
Current Error;
TypeError: Cannot read property '0' of undefined" # profileActions.js:10:4
Things I have tried checked;
- Props dispatching to 'updateProfile' function - working
- Changing 'onChange' function to 'onSubmit' - didn't work
- Adding required to all input fields - didn't work
- Replacing defaultValue with placeholder - didn't work
Profile.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { updateProfile } from "../../actions/profileActions";
import Password from "./Password";
import { Redirect } from "react-router-dom";
class Profile extends Component {
state = {
firstName: this.props.profile.firstName,
lastName: this.props.profile.lastName,
businessName: this.props.profile.businessName,
phoneNumber: this.props.profile.phoneNumber,
email: this.props.profile.email
};
handleChange = e => {
this.setState({
[e.target.id]: e.target.value
});
};
handleSubmit = e => {
e.preventDefault();
//console.log.apply(this.state);
this.props.updateProfile(this.state);
};
render() {
const { profile, profileError, auth } = this.props;
if (!auth.uid) return <Redirect to="/signin" />;
return (
<div className="container-fluid">
<form className="m-4" onSubmit={this.handleSubmit} to="/profile">
<div>{/* FIX - red line appears when bg-white removed below */}</div>
<div>
{/* FIX - form only submits correctly when all inputs have been changed */}
</div>
<div
className="alert-danger rounded col-xs-6 col-sm-6 col-md-6 col-lg-6 mx-auto bg-white"
style={{ color: "#ff0000" }}
>
{profileError ? <p>{profileError}</p> : null}
</div>
<div className="row">
<div className="col-xs-1 col-sm-1 col-md-1 col-lg-1" />
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 d-flex flex-column mx-auto">
<div className="col-stretch rig-bot profile-label">
<h5 className="">First name :</h5>
</div>
<br />
<div className="col-stretch rig-bot profile-label">
<h5 className="">Last name :</h5>
</div>
<br />
<div className="col-stretch rig-bot profile-label">
<h5 className="">Business name :</h5>
</div>
<br />
<div className="col-stretch rig-bot profile-label">
<h5 className="">Phone number :</h5>
</div>
<br />
<div className="col-stretch rig-bot profile-label">
<h5 className="">Email :</h5>
</div>
<br />
</div>
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5 d-flex flex-column">
<div className="form-label-group">
<input
type="text"
id="firstName"
className="form-control"
defaultValue={profile.firstName}
autoFocus
onChange={this.handleChange}
/>
</div>
<br />
<div className="form-label-group">
<input
type="text"
id="lastName"
className="form-control"
defaultValue={profile.lastName}
onChange={this.handleChange}
/>
</div>
<br />
<div className="form-label-group">
<input
type="text"
id="businessName"
className="form-control"
defaultValue={profile.businessName}
onChange={this.handleChange}
/>
</div>
<br />
<div className="form-label-group">
<input
type="tel"
id="phoneNumber"
className="form-control"
defaultValue={profile.phoneNumber}
onChange={this.handleChange}
/>
</div>
<br />
<div className="form-label-group">
<input
type="email"
id="email"
className="form-control"
defaultValue={profile.email}
onChange={this.handleChange}
/>
</div>
<br />
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3" />
</div>
<div className="row">
<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4 p-4 cen-mid mx-auto">
<input
className="btn btn-lg btn-primary btn-md"
type="submit"
value="Submit"
/>
</div>
</div>
</form>
<Password />
<div className="y-100" />
</div>
);
}
}
const mapStateToProps = state => {
console.log(state);
return {
profile: state.firebase.profile,
profileError: state.profile.profileError,
auth: state.firebase.auth
};
};
const mapDispatchToProps = dispatch => {
return {
updateProfile: profile => dispatch(updateProfile(profile))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Profile);
profileActions.js
export const updateProfile = props => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
const firestore = getFirestore();
const userId = getState().firebase.auth.uid;
const firstName = props.firstName;
const lastName = props.lastName;
const initials = props.firstName[0] + props.lastName[0];
const businessName = props.businessName;
const phoneNumber = props.phoneNumber;
const email = props.email;
firestore
.collection("users")
.doc(userId)
.update({
firstName: firstName,
lastName: lastName,
initials: initials,
businessName: businessName,
phoneNumber: phoneNumber,
email: email
})
.then(
firestore.collection("auditProfile").add({
userId: userId,
action: "update",
firstName: firstName,
lastName: lastName,
businessName: businessName,
phoneNumber: phoneNumber,
email: email,
changedOn: new Date()
})
)
.then(() => {
dispatch({ type: "UPDATE_PROFILE" });
})
.catch(err => {
dispatch({ type: "UPDATE_PROFILE_ERROR", err });
});
};
};
I currently have no rules attached to my firestore database and am really hoping the solution is something super stupid like; "firestore won't allow you to use update function if fieldValues are identical".
My brain has currently turned to mush so have given up. Please help?
Thanks in advance for anyone who gives this any time :)

One thing to point out is that you're setting the values in state in your onChange, but then never using those values in your inputs - you get defaultValue from props, but never assign value={this.state.profile.firstName} etc.
The error you're seeing points to props.firstName or props.lastName in profileActions.js being null/undefined (trying to access the 0th index on null/undefined will throw a TypeError). Are you setting initial values for those anywhere?
I'd suggest getting value for each of your inputs from state, and make sure you have initial data for first and last names.