We Keep Coding

Reactjs : How to route to another form on submit and send submitted data to the new page

I need some help. I have created three form class, Employee, Address and Authentication. Inside the Employee form when the user click the submit button, I want it to go to the Address form page and also send the Employee form data to the Address form page. I know that I can put all this on one page, but it will make it hard to read the code. And I am trying to make it match with my backend (spring boot). initialState is a Json an I am importing it from another file if your wondering.
Code for the Employee class
class Employee extends Component {
state = initialState;
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange = event => {
const {formData} = this.state;
this.setState({
formData: {
...formData, // leave other values unchanged
[event.target.name]: event.target.value, // update the changed value
}
});
}
validate = () => {
const {formData, errors} = this.state;
const {firstName, lastName, email, dataOfBirth, phoneNum} = formData;
let {firstNameError, lastNameError, emailError} = errors;
if (!firstName) {
firstNameError = 'First name can not be blank'
}
if (!lastName) {
lastNameError = 'Last name can not be blank'
}
if (!validateEmail(email)) {
emailError = `${email} is not valid email`
}
if (!dataOfBirth) {
console.log(dataOfBirth.length)
dataOfBirthError = 'Enter a valid date of birth'
}
if (!phoneNum) {
phoneNumError = 'Enter a valid phone'
}
if (!validatePhoneNumber(phoneNum)) {
phoneNumError = 'Enter a valid phone number'
}
if (firstNameError || lastNameError) {
this.setState( {
errors: {
firstNameError, lastNameError, emailError,
dataOfBirthError
}
})
return false
}
return true
}
handleSubmit(event) {
event.preventDefault()
const isValid = this.validate();
if (isValid) {
this.setState(initialState)
this.props.push("/addressForm")
}
}
render() {
return (
<div className="container_fluid">
<div className="registration_form_container">
<div className="register_context">
<form action="" onSubmit={this.handleSubmit} className="registration_form">
<div className="form-group">
<input type="text" name="firstName" id="firstName"
placeholder={"Enter first name"}
onChange={this.handleChange}
/>
<span>{this.state.errors.firstNameError}</span>
</div>
<div className="form-group">
<input type="text" name="lastName" id="lastName"
placeholder={"Enter last name"}
onChange={this.handleChange}
/>
<span>{this.state.errors.lastNameError}</span>
</div>
<div className="form-group">
<input type="text" name="email" id="email"
placeholder={"Enter email address"}
onChange={this.handleChange}
/>
<span>{this.state.errors.emailError}</span>
</div>
<div className="form-group custom_btn_container">
<input type="submit" className="btn" value="Register"/>
</div>
</form>
</div>
</div>
</div>
)
}
}
export default Employee;
Code for the Address Class
class Address extends Component {
state = initialState;
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange = event => {
const {formData} = this.state;
this.setState({
formData: {
...formData, // leave other values unchanged
[event.target.name]: event.target.value, // update the changed value
}
});
}
validate = () => {
const {state, city, street, zipcode} = formData.employeeAddress;
let {firstNameError, lastNameError, emailError, dataOfBirthError, phoneNumError} = errors;
let {employeeAddressError: {streetError, stateError, cityError, zipcodeError}} = errors
if (!street) {
streetError = "Street can not be blank"
}
if (!city) {
cityError = "Street can not be blank"
}
if (streetError || cityError || stateError) {
console.log(dataOfBirth)
this.setState( {
errors: {
employeeAddressError: {
streetError,
cityError,
stateError,
zipcodeError
}
}
})
return false
}
return true
}
handleSubmit(event) {
event.preventDefault()
const isValid = this.validate();
if (isValid) {
this.setState(initialState)
}
}
render() {
return (
<div className="container_fluid login_form_main_container">
<div className="address_context">
<div className="form-group">
<input type="text" name="street" id="street"
placeholder={"Enter street address"}
onChange={this.handleChange}
/>
<span>{this.state.errors.employeeAddressError.streetError}</span>
</div>
<div className="form-group custom_btn_container">
<input type="submit" className="btn" value="Register"/>
</div>
</div>
</div>
)
}
}
export default Address;
In App.js
return (
<Router>
<div className="App">
<Header />
<div className="content">
<Switch>
<Route path="/register" component={Employee} />
<Route path="/login">
<Login Login={LoginDetail} error={error} />
</Route>
<Route path="/addressForm" component={Address} />
<Route path="/" component={Home} />
</Switch>
</div>
</div>
</Router>
);
Inside the header page
export default function Header () {
return (
<div className="container_fluid">
<div className="navbar_container">
<div className="logo_container">
<h2>Logo</h2>
</div>
<nav className="navbar">
<div className="links_container">
<li><Link to="/">Home</Link></li>
<li><Link to="/department">Department</Link></li>
<li><Link to="/register">Register</Link></li>
<li><Link to="/login">Login</Link></li>
</div>
</nav>
</div>
</div>
)
}

As told in comment , best way of doing so is context api and here is a small demo of context
sandbox link
import React, { createContext, useState } from "react";
export const ActualContext = createContext();
const Contextt = (props) => {
return (
<ActualContext.Provider>
{props.children}
</ActualContext.Provider>
);
};
export default Contextt;
This is the way for creating a context , sandbox code will help you.

You can use the redirect router redirect feature to pass props https://reactrouter.com/web/api/Redirect/to-object

It is not a good way to send form data on router parameters and just for readability of the code no need to add another router, I suggest using state managements like Redux or Context API as react says or if you do not want either of them just add another component for example named EmployeeForm and add Employee and Address component to it (for better UI/UX you can switch between forms as user want) and pass data like this in EmployeeForm:
class EmployeeForm extends Component{
handleSubmit = values => {
this.setState({employee: values})
}
render() {
<Address employee={this.state.employee} />
<Employee onSubmit={this.handleSubmit} />
}
}
then use this.props.employee at Address component. It is event better implementation if the forms are very related and user can go back and forth as submitting without losing the states of any of these two components.

how can I use state for multiple value?

I am trying to use two states in my Add Customer JS one is used to hide the form and the second is used for JSON.
I want to use form-State to hide a form on cancel button click and the initial-State for JSON.
I want to do something like this
Is it possible to have two states in one react component
import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';
export default class AddCustomer extends React.Component {
constructor(props) {
super(props);
this.state = {
showCreateForm:false,
formData:{
name: '',
address: ''
}
}
this.handleChangeName = this.handleChangeName.bind(this);
this.handleChangeAddress = this.handleChangeAddress.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeName(event) {
const value = event.target.value;
console.log(value);
this.setState({formData:{name:value}});
//name: ""
//address: ""
console.log(this.state.formData);
}
handleChangeAddress(event) {
const value = event.target.value;
console.log(value);
this.setState({formData:{address:value}});
//name: "ram" but now there is no address in formData
console.log(this.state.formData);
}
handleSubmit(event) {
event.preventDefault();
////address: "aaaaa" now there no name in formData
console.log(this.state.formData);
this.setState({formData:{
name:this.state.name, address:this.state.address
}});
this.props.onAddFormSubmit(this.state.formData);
}
//On cancel button click close Create user form
closeCreateForm = () => {
this.setState({ showCreateForm: false })
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ showCreateForm: true })
}
render() {
return (
<div>
<Modal closeOnTriggerMouseLeave={false} trigger={
<Button color='blue' onClick={this.openCreateCustomer}>
New Customer
</Button>
} open={this.state.showCreateForm}>
<Modal.Header>
Create customer
</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input type="text" placeholder ='Name' name = "name"
value = {this.state.name}
onChange = {this.handleChangeName}/>
</Form.Field>
<Form.Field>
<label>Address</label>
<input type="text" placeholder ='Address' name = "address"
value = {this.state.address}
onChange = {this.handleChangeAddress}/>
</Form.Field>
<br/>
<Button type='submit' floated='right' color='green'>Create</Button>
<Button floated='right' onClick={this.closeCreateForm} color='black'>Cancel</Button>
<br/>
</Form>
</Modal.Content>
</Modal>
</div>
)
}
}

You can directly give initial state on the constructor. e.g
this.state ={showCreateForm: false, formModel:{name:'abc', address:'xyz'}}
Yes, you can have multiple state variables technically.

As it was already mentioned, yes, you could do it in the constructor. However you could go even further and declare it as a class member. Like following:
export default class Customer extends React.Component {
state = {
showCreateForm: false,
form: {
name: "",
address: "",
}
}
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
this.props.onAddFormSubmit(this.state.form);
this.setState({
...this.state,
form: {
name: "",
address: "",
}
});
}
// ...
render() {
return (
<div>
<Modal
closeOnTriggerMouseLeave={false}
trigger={
<Button color="blue" onClick={this.openCreateCustomer}>
New Customer
</Button>
}
open={this.state.showCreateForm}
>
<Modal.Header>Create customer</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input
type="text"
placeholder="Name"
name="name"
value={this.state.form.name}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
<label>Address</label>
<input
type="text"
placeholder="Address"
name="address"
value={this.state.form.address}
onChange={this.handleChange}
/>
</Form.Field>
<br />
<Button type="submit" floated="right" color="green">
Create
</Button>
<Button
floated="right"
onClick={this.closeCreateForm}
color="black"
>
Cancel
</Button>
<br />
</Form>
</Modal.Content>
</Modal>
</div>
);
}
}

React - Mapped array not passing props correctly to child component

I am making a dashboard component which displays rendered previews and code for HTML snippets. Inside of the dashboard component I am mapping the array of snippets using .map. Each mapped snippet is going to have a delete function (already built) and an update function.
For the update function to work each snippet has it's own child modal component. I need to pass the ID of the snippet to the modal component where I can combine the ID with the new content before updating the database and state.
However, I'm making a mistake somewhere as I pass the ID as props to the modal.
.map used inside of my Dashboard.js Dashboard class component.
{this.state.snippets.map(snippet => (
<>
<div key={snippet._id} className="holder--pod">
<div className="content">
<div className="content__snippet-preview">
Snippet preview
</div>
<div className="content__body">
<h4>{snippet.name}</h4>
<p>{snippet.details}</p>
<p>{snippet._id}</p> //THIS WORKS
<pre>
<code>{snippet.content}</code>
</pre>
</div>
<div className="content__button">
<button onClick={this.handleDelete(snippet._id)}>
Delete
</button>
<button type="button" onClick={this.showModal}>
Open
</button>
</div>
</div>
</div>
<Modal
sid={snippet._id} //PASS ID HERE
show={this.state.show}
handleClose={this.hideModal}
></Modal>
</>
))}
This renders the snippets below (3 snippet pods, with their database ID included).
The open button opens the modal (Modal.js) below.
import React, { Component } from 'react'
import api from '../api'
export default class Modal extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
details: '',
content: '',
message: null,
}
}
handleInputChange = event => {
this.setState({
[event.target.name]: event.target.value,
})
}
handleClick = id => event => {
event.preventDefault()
console.log(id)
}
render() {
const { sid, show, handleClose } = this.props
console.log(sid)
const showHideClassName = show ? 'modal display-flex' : 'modal display-none'
return (
<div id="Modal" className={showHideClassName}>
<div id="modal-main">
<h4>Edit snippet {sid}</h4>
<form>
Name:{' '}
<input
type="text"
value={this.state.name}
name="name"
onChange={this.handleInputChange}
/>{' '}
<br />
Details:{' '}
<input
type="text"
value={this.state.details}
name="details"
onChange={this.handleInputChange}
/>{' '}
<br />
Content:{' '}
<textarea
value={this.state.content}
name="content"
cols="30"
rows="10"
onChange={this.handleInputChange}
/>{' '}
<br />
<button onClick={this.handleClick(sid)}>TEST ME</button>
</form>
<button onClick={handleClose}>Close</button>
{this.state.message && (
<div className="info">{this.state.message}</div>
)}
</div>
</div>
)
}
}
The console.log just under the render actually pastes the correct 3 ID's the console.
However, calling the ID (sid) within the Modal.js return will only show the last snippet ID, no matter which Modal I open. The same goes for pushing that ID to the handleClick function where I intend to combine the ID with an update package.

Solution below as initiated by HMR in the comments.
The problem was all the modals were showing and just the last one was visible.
Fixed by moving the modal out of the .map and instead updating the ID from within the .map to the state and passing the state ID to a new nested component within the modal.
Also switched to using dynamic CSS to show and hide the modal based on the state.
Dashboard.jsx
export default class Snippets extends Component {
constructor(props) {
super(props)
this.showModal = React.createRef()
this.state = {
snippets: [],
show: false,
sid: '',
}
}
handleDelete = id => event => {
event.preventDefault()
api
.deleteSnippet(id)
.then(result => {
console.log('DATA DELETED')
api.getSnippets().then(result => {
this.setState({ snippets: result })
console.log('CLIENT UPDATED')
})
})
.catch(err => this.setState({ message: err.toString() }))
}
handleModal = id => {
this.setState({ sid: id })
this.showModal.current.showModal()
}
//<div id="preview">{ReactHtmlParser(snippet.content)}</div>
render() {
return (
<>
<Modal ref={this.showModal} handleClose={this.hideModal}>
<ModalUpdate sid={this.state.sid} />
</Modal>
<div className="Dashboard">
<div className="wrapper">
<div className="container">
<div className="holder">
<div className="content">
<div className="content__body">
<h3>Dashboard</h3>
</div>
</div>
</div>
<div className="break"></div>
{this.state.snippets.map(snippet => (
<div key={snippet._id} className="holder--pod">
<div className="content">
<div className="content__snippet-preview">
Snippet preview
</div>
<div className="content__body">
<h4>{snippet.name}</h4>
<p>{snippet.details}</p>
<p>{snippet._id}</p>
<pre>
<code>{snippet.content}</code>
</pre>
</div>
<div className="content__button">
<button onClick={this.handleDelete(snippet._id)}>
Delete
</button>
<button
type="button"
onClick={() => this.handleModal(snippet._id)}
>
Open
</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
)
}
Modal.jsx
import React, { Component } from 'react'
export default class Modal extends Component {
constructor(props) {
super(props)
this.state = {
show: false,
}
}
showModal = () => {
this.setState({ show: true })
}
hideModal = () => {
this.setState({ show: false })
}
render() {
return (
<div
id="Modal"
style={{ display: this.state.show === true ? 'flex' : 'none' }}
>
<div id="modal-main">
<h4>Edit snippet </h4>
{this.props.children}
<button onClick={() => this.hideModal()}>Close</button>
</div>
</div>
)
}
}
ModalUpdate.jsx
import React, { Component } from 'react'
export default class ModalUpdate extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
details: '',
content: '',
message: null,
}
}
// handleInputChange = event => {
// this.setState({
// [event.target.name]: event.target.value,
// })
// }
// handleClick = id => event => {
// event.preventDefault()
// console.log(id)
// }
render() {
return <h4>ID = {this.props.sid}</h4>
}
}

I am not sure about the handleDelete function,. but replacing the line should solve the issue probably
<button onClick={() => this.handleDelete(snippet._id)}>

One potential issue is the this.handleDelete(snippet._id) will fire immediately rather than onClick, so you will need to add an anonymous function in the event listener:
() => this.handleDelete(snippet._id)
instead of
this.handleDelete(snippet._id)

How can I keep on adding username and status instead of updating the previous one in reactJS?

I have two components. One named 'Adduser' containing form elements so that a user may add details of post. Other named 'PostAdded', in which i want to show all posts in a list item. On every click, I want 'Adduser' to grab data from input elements and pass it to 'PostAdded' in a way that 'PostAdded' show every individual post(title and post together) in a new div instead of updating previous one. What is the best approach to do it?
File 'Adduser.js'
class AddUser extends Component {
constructor(props) {
super();
this.state = {
title : "",
post : "",
}
this.handleclick = this.handleclick.bind(this);
}
handleclick() {
this.setState(prevState => ({
title : document.getElementById("title").value,
post : document.getElementById("post").value,
}));
}
render() {
return(
<div>
<input type="text" id="title" placeholder="Title here" />
<input type="text" id="post" placeholder="Post here" />
<input type="button" onClick={this.handleclick} value="Add Post" />
<PostAdded posts={this.state.post} />
</div>
)
}
}
export default AddUser;
File 'PostAdded.js'
import React, {Component} from 'react';
class PostAdded extends Component {
constructor(props) {
super();
}
render() {
return <ul>
{ this.props.posts.map(post =>
<li>{post}</li>
)}
</ul>
}
}
export default PostAdded;

In AddUser component change your state and handleclick method. I have not modified your code too much so you can understand it easily.
class AddUser extends Component {
constructor(props) {
super();
this.state = {
posts: [],
}
this.handleclick = this.handleclick.bind(this);
}
handleclick() {
// accessing values from the input
let title = document.getElementById("title").value
let post = document.getElementById("post").value
// creating a new object
let newPostObj = {title, post}
// concatenating new object to component posts state
let newPost = this.state.posts.concat(newPostObj)
// setting newPost as component new state
this.setState({
posts: newPost
})
// emptying the input fields
document.getElementById("title").value = ''
document.getElementById("post").value = ''
}
render() {
return(
<div>
<input type="text" id="title" placeholder="Title here" />
<input type="text" id="post" placeholder="Post here" />
<input type="button" onClick={this.handleclick} value="Add Post" />
<PostAdded posts={this.state.posts} />
</div>
)
}
}
In your PostAdded component update render() method
class PostAdded extends Component {
constructor(props) {
super();
}
render() {
return (
<ul>
{ this.props.posts.map((post, i) =>
<li key={`${i}-post`}><span>{post.title}</span><span>{post.post}</span></li>
)}
</ul>
)
}
}
UPDATE
Change your AddUser Component
class AddUser extends Component {
constructor(props) {
super();
this.state = {
posts: [],
title: '',
post: ''
}
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
// called when we type something in input fields
handleChange(e) {
// you can console log here to see e.target.name and e.target.value
this.setState({
[e.target.name]: e.target.value
})
}
handleClick() {
// using spread operator to copy previous state posts and adding new post object
let newPosts = [ ...this.state.posts, { title: this.state.title, post: this.state.post}]
this.setState({
posts: newPosts,
title: '',
post: ''
})
}
render() {
return(
<div>
// added name,value attributes and onChange listener
<input type="text" name="title" value={this.state.title} onChange={this.handleChange} placeholder="Title here" />
<input type="text" name="post" value={this.state.post} onChange={this.handleChange} placeholder="Post here" />
<input type="button" onClick={this.handleClick} value="Add Post" />
<PostAdded posts={this.state.posts} />
</div>
)
}
}

Redux-form: How to set initialvalues on a wizard form?

I have a field Location, that is a mandatory field for yhe API, so can't be submitted blank. So I am trying to set 0 as initialValue for the field. the Location field is on the second step of the form and setting initialValues on WizardFormSecondPage removes all input previous input data from the state. How do I set the initialValue for the Location field and keep all my data put in the first step?
Location component:
export class GetLocation extends Component{
constructor(){
super();
this.getMyLocation = this.getMyLocation.bind(this);
}
getMyLocation = () => {
const location = window.navigator && window.navigator.geolocation;
if (location) {
location.getCurrentPosition((position) => {
this.props.onLocationChanged(position.coords);
},
(positionError) => {
console.log(positionError.message);
this.props.onLocationChanged("0")
},{maximumAge:0, timeout: 60000})
} else {
console.log();
this.props.onLocationChanged("0")
}
};
render(){
return(
<div>
<p>Your location is </p>
<Field
name="latitude"
component="input"
className="form-control" initialValues={0.0}
/>
<Field
name="longitude"
component="input"
className="form-control"
/><br/>
<button type="button" className="btn btn-success" onClick={this.getMyLocation.bind(this)}>Get Geolocation</button>
</div>
);
}
}
WizardFormSecondPage
let WizardFormSecondPage = props => {
const { handleSubmit, previousPage} = props;
const onLocationChanged = (loc) => {
props.change('location.latitude', loc.latitude);
props.change("location.longitude", loc.longitude);
};
return (
<form onSubmit={handleSubmit} className="form-horizontal">
<div className="panel">
<div className="form-group">
<label className="control-label col-sm-2" htmlFor="address">
Location
</label>
<div className="row">
<div className="col-sm-12">
<p className="label-lead">Own Address</p>
<FormSection name="location" component={Address}>
<Address />
</FormSection>
<p className="label-lead">Location Coordinates</p>
<FormSection name="location" component={GetLocation}>
<GetLocation onLocationChanged={onLocationChanged} />
</FormSection>
</div>
</div>
</div>
</div>
<div className="clearfix">
<button type="button" className="previous pull-left btn btn-default" onClick={previousPage}>
Previous
</button>
<button type="submit" className="next pull-right btn btn-primary">
Next
</button>
</div>
</div>
</form>
);
};
export default reduxForm({
form: "wizard", // <------ same form name
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate
})(WizardFormSecondPage);
Any help is much appreciated.

Turns out, my approach was wrong. I could set an initialValue to the entire WizardForm and it would not initialize again. So, in stead of trying to set initialize WizardFormSecondPage, I had to set values on WizardForm.js. Here's my WizardForm.js:
class WizardForm extends Component {
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.state = {
page: 1,
};
}
nextPage() {
this.setState({ page: this.state.page + 1 });
}
previousPage() {
this.setState({ page: this.state.page - 1 });
}
onSubmit(values, dispatch) {
return dispatch(saveData(values));
// Call the action creator which is responsible for saving data here.
}
render() {
const { onSubmit } = this.props;
const { page } = this.state;
return (
<div>
{page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />}
{page === 2 &&
<WizardFormSecondPage
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>}
{page === 3 &&
<WizardFormPreview
previousPage={this.previousPage}
onSubmit={this.onSubmit}
/>}
</div>
);
}
}
WizardForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
};
// this part sets the initial values. connect if you need store.
WizardForm = reduxForm ({
form: 'wizard',
initialValues: {
location: {
latitude: "0.0",
longitude: "0.0"
}
}
})(WizardForm)
export default WizardForm;