We Keep Coding

How can I show/hide a form div in React.Component?

I am creating a CV Application project and I have a button that allows the user to Add Work Experience. When the user clicks the button a form pops up and they are able to fill the information out and click Submit.
I'm trying to make it so once the user hits Submit, the form div stays hidden until the user clicks Add Work Experience again. I've made something similar before in vanilla JS where I simply changed the forms class from display: block to display: none but that doesn't seem possible in React.
import React, { Component } from "react";
class WorkExperience extends Component {
render() {
const workExperience = [
{
title: "title",
company: "company",
location: "location",
description: "description",
},
];
return (
<>
<div id="content" className="content">
<h1 className="title">Work Experience</h1>
<div className="work-experience">
<p>Job Title: {workExperience[0].title}</p>
<p>Company: {workExperience[0].company}</p>
<p>Location: {workExperience[0].location}</p>
<p>Description: {workExperience[0].description}</p>
</div>
</div>
<button className="form-btn">+ Add Work Experience</button>
</>
);
}
}
export default WorkExperience;
And here is the form code I am currently using. This is the form I want to show/hide after clicking the Add Work Experience button shown above.
<form>
<label for="title">Job Title</label>
<input id="title" className="form-row" type="text" name="title" />
<label for="company">Company</label>
<input className="form-row" type="text" name="company" />
<label for="location">Location</label>
<input className="form-row" type="text" name="location" />
<label for="description">Job Description</label>
<textarea rows="4" cols="50" name="description"></textarea>
<button className="save">Save</button>
<button className="cancel">Cancel</button>
</form>

You can use an if statement or a ternary to return different jsx. That would look something like this. There are other ways as well, however this is a basic example of something you could do.
<>
{
shouldShow ?
(
<div id="content" className="content">
<h1 className="title">Work Experience</h1>
<div className="work-experience">
<p>Job Title: {workExperience[0].title}</p>
<p>Company: {workExperience[0].company}</p>
<p>Location: {workExperience[0].location}</p>
<p>Description: {workExperience[0].description}</p>
</div>
</div>
<button className="form-btn">+ Add Work Experience</button>
) : (
<form>
<label for="title">Job Title</label>
<input id="title" className="form-row" type="text" name="title" />
<label for="company">Company</label>
<input className="form-row" type="text" name="company" />
<label for="location">Location</label>
<input className="form-row" type="text" name="location" />
<label for="description">Job Description</label>
<textarea rows="4" cols="50" name="description"></textarea>
<button className="save">Save</button>
<button className="cancel">Cancel</button>
</form>
)
}
</>
Where shouldShow is what determines whether the form is showing or not.
The benefit to this is that if the form is showing, the other content is not added to the DOM and vice versa.
shouldShow would be a variable you could add to state, and when the button is clicked, you toggle the state variable, causing a re-render.
https://reactjs.org/docs/state-and-lifecycle.html
You could also choose to render styles depending on whether or not that component is showing, the key being that boolean state variable that is re-rendering the component.

Use Repeater Felilds to add User Work Experience. It's so easy to handle like this.
Repeater Component
import React from "react";
const Repeater = ({ inputFields, setInputFields }) => {
const handleFormChange = (index, event) => {
let data = [...inputFields];
data[index][event.target.name] = event.target.value;
setInputFields(data);
};
const removeFields = (index) => {
let data = [...inputFields];
data.splice(index, 1);
setInputFields(data);
};
return (
<div className="row">
{inputFields.map((input, index) => {
return (
<>
<div className="form-group col-sm-12 col-md-4 mb-3">
<div className="controls">
<input
type="text"
className="form-control inputset"
id="title"
placeholder="title"
name="title"
data-validation-required-message="This field is required"
aria-invalid="true"
required
value={input.title}
onChange={(event) => handleFormChange(index, event)}
/>
<div className="help-block" />
</div>
</div>
<div className="form-group col-sm-12 col-md-4 mb-3">
<div className="date-picker">
<input
type="text"
className="pickadate form-control inputset"
value={input.company}
onChange={(event) => handleFormChange(index, event)}
name="company"
id="pass"
data-validation-required-message="This field is required"
data-toggle="tooltip"
data-trigger="hover"
data-placement="top"
data-title="Date Opened"
data-original-title=""
required
/>
</div>
</div>
<div className="form-group col-sm-12 col-md-4 d-flex mb-3">
<input
type="text"
className="form-control inputset"
id="location"
placeholder="location"
name="location"
data-validation-required-message="This field is required"
aria-invalid="true"
required
value={input.location}
onChange={(event) => handleFormChange(index, event)}
/>
<input
type="text"
className="form-control inputset"
id="description"
placeholder="description"
name="description"
data-validation-required-message="This field is required"
aria-invalid="true"
required
value={input.description}
onChange={(event) => handleFormChange(index, event)}
/>
{inputFields.length === 1 ? null : (
<button
type="button"
className=" d-flex justify-content-center align-items-center ml-1 btn"
onClick={() => {
removeFields();
}}
>
<i className="uil-trash-alt" />
</button>
)}
</div>
</>
);
})}
</div>
);
};
export default Repeater;
Main Component
use these as states and pass the objects to the Repeater Component. First, the state is empty and when the user clicks on the button Add More Experience The files auto-show.
const [inputFields, setInputFields] = useState([
{ degree_title: "", institue: "", end_date: "" },
]);
const addFields = () => {
let newfield = { degree_title: "", institue: "", end_date: "" };
setInputFields([...inputFields, newfield]);
};
<Repeater
inputFields={inputFields}
setInputFields={setInputFields}
addFields={addFields} />
I wish this solution helps you :) Make sure to change the state object according to your requirements.

Issue posting data to api in react js contact form

I am trying to send data to my contact form api through react but I am getting this problem
I tried to get input as a value to post through api when clicked on submit button but it is not working
error = the api should call like this https://edu.orgiance.com/api/contactus?secret=xxxxx-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test#test.com&mobile=8463274946&message=test
but it is calling like this
http://localhost:3000/?name=dfdfsd&email=dsffdsf%40gmail.com&phone=937285294&website=sxascsac&message=dscdscsfgcd#
My Code
import React from 'react';
const ContactForm = (props) => {
const { submitBtnClass } = props;
function handleClick() {
// Send data to the backend via POST
fetch('https://edu.orgiance.com/api/contactus?secret=f1794e34-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test#test.com&mobile=8463274946&message=', { // Enter your IP address here
method: 'POST',
mode: 'cors',
body: JSON.stringify(jsonData) // body data type must match "Content-Type" header
})
}
var jsonData = {
"contact": [
{
"fname": props.fname,
"email": props.email,
"mobile": props.phone,
"message": props.message
}
]
}
return (
<form id="contact-form" action="#">
<div className="row">
<div className="col-md-6 mb-30">
<input className="from-control" type="text" id="name" name="name" placeholder="Name" value={props.fname} required />
</div>
<div className="col-md-6 mb-30">
<input className="from-control" type="text" id="email" name="email" placeholder="E-Mail" value={props.email} required />
</div>
<div className="col-md-6 mb-30">
<input className="from-control" type="text" id="phone" name="phone" placeholder="Phone Number" value={props.phone} required />
</div>
<div className="col-md-6 mb-30">
<input className="from-control" type="text" id="website" name="website" placeholder="Your Website" required />
</div>
<div className="col-12 mb-30">
<textarea className="from-control" id="message" name="message" placeholder="Your message Here" value={props.message}></textarea>
</div>
</div>
<div className="btn-part" >
<button onClick={handleClick} className={submitBtnClass ? submitBtnClass : 'readon learn-more submit'} type="submit">Submit Now </button>
</div>
</form>
);
}
export default ContactForm;

You're code has a few issues:
jsonData never gets updated, because any update to a state or prop will rerender your function and therefore reinitialize jsonData
Any value that is set on an input or textarea requires an onChange handler. Without it, you can't even type anything into the respective element. See https://reactjs.org/docs/forms.html#controlled-components for more information.
To make your code work, change jsonData into a state that get's initialized with the props data. To make an easier example, I will use contact as state and got rid of the array:
import React, { useState } from "react";
const ContactForm = (props) => {
const { submitBtnClass, ...other } = props;
const [contact, setContact] = useState({
fname: "",
email: "",
mobile: "",
message: "",
...other
});
function handleClick() {
// Send data to the backend via POST
fetch(
"https://edu.orgiance.com/api/contactus?secret=f1794e34-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test#test.com&mobile=8463274946&message=",
{
// Enter your IP address here
method: "POST",
mode: "cors",
body: JSON.stringify(contact) // body data type must match "Content-Type" header
}
);
}
function setContactData(e) {
const name = e.currentTarget.name;
const value = e.currentTarget.value;
setContact((prev) => {
return {
...prev,
[name]: value
};
});
}
return (
<form id="contact-form" action="#">
<div className="row">
<div className="col-md-6 mb-30">
<input
className="from-control"
type="text"
id="name"
name="fname"
placeholder="Name"
value={contact.fname}
onChange={setContactData}
required
/>
</div>
<div className="col-md-6 mb-30">
<input
className="from-control"
type="text"
id="email"
name="email"
placeholder="E-Mail"
value={contact.email}
onChange={setContactData}
required
/>
</div>
<div className="col-md-6 mb-30">
<input
className="from-control"
type="text"
id="phone"
name="phone"
placeholder="Phone Number"
value={contact.phone}
onChange={setContactData}
required
/>
</div>
<div className="col-md-6 mb-30">
<input
className="from-control"
type="text"
id="website"
name="website"
placeholder="Your Website"
value={contact.website}
onChange={setContactData}
required
/>
</div>
<div className="col-12 mb-30">
<textarea
className="from-control"
id="message"
name="message"
placeholder="Your message Here"
value={contact.message}
onChange={setContactData}
></textarea>
</div>
</div>
{JSON.stringify(contact)}
<div className="btn-part">
<button
onClick={handleClick}
className={
submitBtnClass ? submitBtnClass : "readon learn-more submit"
}
type="submit"
>
Submit Now{" "}
</button>
</div>
</form>
);
};
const App = () => {
return <ContactForm message={"test"} />;
};
export default App;

How could I get data from input fields when I click the paypal button in this scenary

I'm aware that I'm getting empty data when I click the PayPal button but It gets filled data from input fields when I click a normal button. I need to send the data from input fields to the method to get validation when I click Paypal button. Please, need some help..
I realize that I got a message 422 from my backend that It means that I haven't written something despite I have written and I clicked on the Paypal button.
<div>
<div className="row">
<div className="col-md-6">
<div className="form-group mb-3">
<label>
First Name
</label>
<input type="text" name="firstname" onChange={handleInput} defaultValue={checkoutInput.firstname} className="form-control" />
<small className="text-danger">{error.firstname} </small>
</div>
</div>
<div className="col-md-6">
<div className="form-group mb-3">
<label>
Last Name </label>
<input type="text" name="lastname" onChange={handleInput} value={checkoutInput.lastname} className="form-control" />
<small className="text-danger">{error.lastname} </small>
</div>
</div>
<div className="col-md-6">
<div className="form-group mb-3">
<label>
Phone Number
</label>
<input type="text" name="phone" onChange={handleInput} value={checkoutInput.phone} className="form-control" />
<small className="text-danger">{error.phone} </small>
</div>
</div>
<div className="col-md-6">
<div className="form-group mb-3">
<label>
Email Address
</label>
<input type="email" name="email" onChange={handleInput} value={checkoutInput.email} className="form-control" />
<small className="text-danger">{error.email} </small>
</div>
</div>
<div className="col-md-12">
<div className="form-group mb-3">
<label>
Full Address
</label>
<textarea rows="3" name="address" onChange={handleInput} defaultValue={checkoutInput.address} className="form-control"></textarea>
<small className="text-danger">{error.address} </small>
</div>
</div>
<div className="col-md-4">
<div className="form-group mb-3">
<label>
City
</label>
<input type="text" name="city" onChange={handleInput} value={checkoutInput.city} className="form-control" />
<small className="text-danger">{error.city} </small>
</div>
</div>
<div className="col-md-4">
<div className="form-group mb-3">
<label>
State
</label>
<input type="text" name="state" onChange={handleInput} value={checkoutInput.state} className="form-control" />
<small className="text-danger">{error.state} </small>
</div>
</div>
<div className="col-md-4">
<div className="form-group mb-3">
<label>
Zip code
</label>
<input type="text" name="zipcode" onChange={handleInput} value={checkoutInput.zipcode} className="form-control" />
<small className="text-danger">{error.zipcode} </small>
</div>
</div>
<div className="col-md-12">
<div className="form-group text-end">
<button type="button" onClick={(e) => submitOrder( 'cod')} className="btn btn-primary">Place Order</button>
<button type="button" onClick={(e) => submitOrder( 'razorpay')} className="btn btn-primary">Place Order</button>
<button type="button" onClick={(e) => submitOrder( 'payonline')} className="btn btn-primary">paypal</button>
<PayPalScriptProvider options={{ "client-id": "AWMf_5zpQPNAay2g4mLmFFldXbXycJKilI1utjKf2xxaswqedgszaxx12" }}>
<PayPalButtons style={{ layout: "horizontal" }}
onClick={(data, actions) => {
console.log(data);
submitOrder('payonline');
const newJudge1={newJudge };
//alert(JSON.stringify(newJudge1))
if(newJudge1){
//console.log({newJudge})
return actions.reject();
}else{
return actions.resolve();
}
}}
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
}}
/>
</PayPalScriptProvider>
</div>
</div>
</div>
const [loading, setLoading] = useState(true);
const navigate = useNavigate();
const [cart, setCart] = useState([]);
const [newJudge, setNewJudge] = useState(true);
const [checkoutInput, setCheckoutInput] = useState(
{
firstname: '',
lastname: '',
phone: '',
email: '',
address: '',
city: '',
state: '',
zipcode: '',
});
const [error, setError] = useState([]);
const handleInput = (e) => {
console.log(e);
e.persist();
setCheckoutInput({ ...checkoutInput, [e.target.name]: e.target.value })
}
const submitOrder = (payment_mode) => {
// e.preventDefault();
//e.persist();
//console.log(e);
const data = {
firstname: checkoutInput.firstname,
lastname: checkoutInput.lastname,
phone: checkoutInput.phone,
email: checkoutInput.email,
address: checkoutInput.address,
city: checkoutInput.city,
state: checkoutInput.state,
zipcode: checkoutInput.zipcode,
payment_mode: payment_mode,
payment_id: ''
}
switch (payment_mode) {
case 'cod':
console.log(data);
break;
case 'payonline':
axios.post('/api/place-order', data).then(res => {
console.log(data);
if (res.data.status === 200) {
setNewJudge(false);
console.log(false);
setError([]);
} else if (res.data.status === 422) {
swal("All fields are mandatory", "", "error");
setNewJudge(true);
console.log(newJudge);
setError(res.data.errors);
}
});
break;
default:
break;
}

Gathering form information and a successful payment at the same time is tricky. One of the events has to happen first, and you need to handle the possibility of that event completing without the other completing.
Using a server, one of the best methods is to serialize and send all the form information in a JSON body as part of the fetch call to capture the payment. This extends the server demo pattern of https://developer.paypal.com/demo/checkout/#/pattern/server , which requires you to create two routes that in turn call the PayPal API.
If you instead do client-side creates or captures (using the JS SDK actions.order.create / actions.order.capture) , and/or if you rely on the client to do a form post after a successful capture (in onApprove), your integration will be inferior and prone to problems of desired serial operations not completing together since they rely on the client browser.

Cant type in an input field of a form in React js

I am new to React js. I tried post axios call using react hooks. But after implementing the code and starting the server, I cant type in the form. Previously I could type. I can only type in the phone and email fields. I cant type in first_name,last_name and message fields. I dont know what is the issue.
My MessageForm.js:
const MessageForm = () => {
const url = 'https://example.herokuapp.com/api/messages'
const [data, setData] = useState({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
})
function submit(e){
e.preventDefault();
axios.post(url,{
first_name: data.first_name,
last_name:data.last_name,
email:data.email,
phone:data.phone,
msz:data.msz
})
.then(res=>{
console.log(res.data)
})
}
function handle(e){
const newdata = {...data}
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(newdata)
}
return (
<div className="message-form">
<div className="container">
<div className="title">
<span>Contact Now</span>
<div className="main-title">Send us a message</div>
</div>
{/* form start */}
<form action="" className="apply" onSubmit={(e)=> submit(e)}>
<div className="row row-1">
{/* Name here */}
<div className="input-field name">
<label htmlFor="Name">First Name</label>
<input onChange ={(e) => handle(e)} value = {data.first_name}
type="text"
placeholder="Your First Name"
name="Name"
id="name"
/>
</div>
<div className="input-field name">
<label htmlFor="Name">Last Name</label>
<input onChange ={(e) => handle(e)} value = {data.last_name}
type="text"
placeholder="Your Last Name"
name="Name"
id="name"
/>
</div>
</div>
<div className="row row-2">
{/* phone here */}
<div className="input-field phone">
<label htmlFor="Phone">Phone</label>
<input onChange ={(e) => handle(e)} value = {data.phone}
type="text"
placeholder="Your Phone Here"
name="Phone"
id="phone"
/>
</div>
{/* Email here */}
<div className="input-field email">
<label htmlFor="Email">Email Address</label>
<input onChange ={(e) => handle(e)} value = {data.email}
type="text"
placeholder="Your Email Address"
name="Email"
id="email"
/>
</div>
</div>
{/* date select */}
<div className="row row-3">
{/* Message here */}
<div className="input-field message">
<label htmlFor="Message">Message</label>
<textarea onChange ={(e) => handle(e)} value = {data.msz}
placeholder="Enter Message Here"
name="Message"
id="message"
/>
</div>
</div>
{/* submit button */}
<ExploreButton hoverText="Submit" hover="hoverTrue">
Send Now
</ExploreButton>
</form>
{/* Form end */}
</div>
</div>
);
};
export default MessageForm;

It is because you are assigning id="name" to your first_name and last_name fields. So it doesn't change the correct field inside the data object.
Example on first_name:
const handleInputChange = e => {
setData(d => ({...d, [e.target.id]: e.target.value}))
}
<input onChange ={(e) => handle(e)} value = {data.first_name}
onChange={handleInputChange}
type="text"
placeholder="Your First Name"
name="Name"
id="first_name"
/>
PS: You don't need to do onChange={e => handle(e)}. The handle will get the e argument as default with: onChange={handle}

Update id="name" to id="first_name" and id="last_name"
Update id="message" to id="msz"
Name of key state must be the same with id

circular dependency detected in reactjs

I am facing circular dependency issue in my modal where there is signup form and a login button in the signup form for already registered user. Also login form has then signup button for not already registered user. I have heard es6 solves circular dependency issue but i am still getting it. How can i solve this issue?
WARNING in Circular dependency detected:
app/containers/LoginContainer/index.js ->
app/containers/Register/index.js ->
app/containers/LoginContainer/index.js
WARNING in Circular dependency detected:
app/containers/Register/index.js ->
app/containers/LoginContainer/index.js ->
app/containers/Register/index.js
import Login from "containers/LoginContainer";
const mapDispatchToProps = dispatch => ({
showDialog: dialog => dispatch(showDialog(dialog)),
hideDialog: () => dispatch(showDialog("null"))
});
class Register extends React.Component {
render() {
const { show_password, user } = this.state;
return (
<Modal show onHide={() => this.props.hideDialog()}>
<form onSubmit={this.handleSubmit}>
<div className="form-group form-block">
<input
type="text"
name="first_name"
className="form-control-form "
placeholder="First Name"
onChange={this.handleChange}
/>
</div>
<div className="form-group form-block">
<input
type="text"
name="last_name"
className="form-control-form "
placeholder="Last Name"
onChange={this.handleChange}
/>
</div>
<div className="form-group form-block">
<input
type="email"
name="email"
className="form-control-form "
placeholder="Email"
onChange={this.handleChange}
/>
</div>
<div className="form-group form-block">
<input
type={show_password ? "text" : "password"}
name="password"
className="form-control-form"
placeholder="Password"
onChange={this.handleChange}
/>
</div>
</form>
<Modal.Footer>
<a
className="btn-gst"
onClick={() => this.props.showDialog(<Login />)}
>
Login
</a>
</Modal.Footer>
</Modal>
);
}
}
import Register from 'containers/Register';
<Modal show onHide={() => this.props.hideDialog()}>
<form onSubmit={this.handleSubmit}>
<div className="form-group form-block">
<input
type="text"
name="username"
/>
</div>
<div className="form-group form-block">
<input
type="password"
name="password"
required
/>
</div>
<div className="row">
<div className="col-md-6">
<div className="checkbox meta">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</form>
<Modal.Footer>
<a
className="btn-gst"
onClick={() => this.props.showDialog(<Register />)}
>
Sign Up
</a>
</Modal.Footer>
</Modal>