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.

How to make responsive an input field with bootstrap or css?

import axios from "axios";
import React from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { useForm } from "react-hook-form";
import { toast, ToastContainer } from "react-toastify";
import auth from "../../firebase.init";
const AddInventoryItems = () => {
const { register, handleSubmit } = useForm();
const [user] = useAuthState(auth);
const onSubmit = (data) => {
axios.post("http://localhost:5000/item", data).then((res) => {
const { data } = res;
if (data) {
toast("You have added a new item, Yeah!!!");
}
});
};
return (
<div className="row w-25 mx-auto">
<form
className="d-flex flex-column my-5 col-sm-12 col-md-6"
onSubmit={handleSubmit(onSubmit)}
>
<input
placeholder="Enter Name"
className="mb-2"
value={user.displayName}
type="text"
{...register("user name")}
required
/>
<input
placeholder="Enter Email"
className="mb-2"
type="email"
value={user.email}
{...register("email")}
/>
<input
placeholder="Image Url"
className="mb-2"
type="text"
{...register("image")}
/>
<input
placeholder="Item name"
className="mb-2"
{...register("name", { required: true, maxLength: 20 })}
/>
<input
placeholder="Item description"
className="mb-2"
{...register("description")}
/>
<input
placeholder="Item price"
className="mb-2"
type="number"
{...register("price", { min: 18, max: 99 })}
/>
<input
placeholder="Item quantity"
className="mb-2"
type="number"
{...register("quantity", { min: 18, max: 99 })}
/>
<input
placeholder="Supplier name"
className="mb-2"
{...register("supplier name")}
/>
<input
className="btn btn-outline-primary"
type="submit"
value="Add new item"
/>
</form>
<ToastContainer />
</div>
);
};
export default AddInventoryItems;

To make responsive form elements, you have to wrap all the inputs in form-group class and in their inputs you have to add class form-control
example:
<div class="form-group">
<label for=""></label>
<input type="email" class="form-control" />
</div>
take a look on Bootstrap documentation:
https://getbootstrap.com/docs/5.1/forms/overview/

Use form-control class in your form input field. So your form field will be responsive.
<form className="d-flex flex-column my-5 col-sm-12 col-md-6 form-control" onSubmit={handleSubmit(onSubmit)}>
You can also see bootstrap official documentation for more detail

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

React - Unable to get pre-filled form

Objective:
Need to pre-fill the form if the user has address saved in the DB.
Issue:
I am passing down the address object (coming from backend for the logged in user). :
{
city: "CA"
line1: "testline1"
line2: "testline2"
phone: "7772815615"
pin: "1234"
state: "CA"
user: "5eea03a736b70722c83a7b63"
}
Though I am able to console log it, but I am unable to pre-populate it in the form (rendered by the child component)
Child Component
let addressFinalValue = {};
const addressValue = (e) => {
addressFinalValue[e.target.name] = e.target.value;
};
const propsAddress = props.address;
const [address, setAddress] = useState(propsAddress);
console.log(propsAddress); // < -- ABLE TO CONSOLE LOG IT
return (
<div>
<div className="modal-header ">
<h5 className="modal-title text-center">
{address ? 'Please enter your address' : 'Please confirm your address'}
</h5>
<button className="close" data-dismiss="modal" aria-label="close">
<span className="edit-order-button" aria-hidden="true">Edit order</span>
</button>
</div>
<div className="container my-4">
<form onSubmit={submitHandler}>
{error && <p className="login-error" style={{ color: "red" }}>{error}</p>}
<div className="form-group">
<input id="address-line-1" className="form-control" value={propsAddress.line1}
onChange={addressValue} name="line1" type="text" placeholder="Line 1" />
</div>
<div className="form-group">
<input id="address-line-2" className="form-control" value={propsAddress.line2}
onChange={addressValue} name="line2" type="text" placeholder="Line 2" />
</div>
<div className="form-group">
<input id="city" className="form-control" value={propsAddress.city}
onChange={addressValue} name="city" type="text" placeholder="City" />
</div>
<div className="form-group">
<input id="state" className="form-control" value={propsAddress.state}
onChange={addressValue} name="state" type="text" placeholder="State" />
</div>
<div className="form-group">
<input id="pin" className="form-control" value={propsAddress.pin}
onChange={addressValue} name="pin" type="text" placeholder="PIN" />
</div>
<div className="form-group">
<input id="phone" className="form-control" value={propsAddress.phone}
onChange={addressValue} name="phone" type="text" placeholder="Phone Number" />
</div>
<hr />
<button className="btn btn-success">Save Address & Continue</button>
</form>
</div>
</div> );
Is there something I am missing here? I don't know what it is.

I would achieve this using the following:
Make the child component a class with state. Pass the child component a populate prop, with the address values.
<ChildComponent populate={address} />
constructor(props){
this.state = {
...props.populate
}
}
handleAddressChange(e, addressItem){
this.setState({[addressItem]: event.target.value});
}
Then, in your form, set the value of each form item equal to the stateful address value. For example:
<div className="form-group">
<input id="address-line-1" className="form-control" value={this.state.line1}
onChange={(e) => handleAddressChange(e, 'line1')} name="line1" type="text" placeholder="Line 1" />
</div>
Make sure your onChange event handler is updating the child components this.state.address value using setState.
Checkout this file for more info: https://github.com/ccrowley96/grocerylist/blob/master/client/src/components/AddEditModal/AddEditModal.js
I do something very similar.