We Keep Coding

How to merge/join two components Parent/Child state react

A newbie plight to how to handle/merge state. I have an inventory UI I'm trying to create, what I want to achieve is this, every time a new item gets added to ItemVariation, it appends to the Item component. I'm using a Django backend not that it matters but I want to add ItemVaration as a reverse relation to Item Table.
something like this.
state = [{Item},[{ItemVariation}, {ItemVariation}]]
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ItemVariation from './ItemVariation';
export const Item = (props) => {
const fetchCategory = 'http://localhost:8000/api/product/categories/'
const fetchManufacturer = 'http://localhost:8000/api/product/manufacturers/'
const fetchBranch = 'http://localhost:8000/api/users/branch/'
const [manufacturer, setManufacturer] = useState([])
const [categories, setCategories] = useState([])
const [branch, setBranch] = useState([])
const [item, setItem] = useState({
name: '',
category: categories,
branch: branch,
manufacturer: manufacturer,
has_size: false,
})
useEffect(() => {
const cat = axios.get(fetchCategory);
const man = axios.get(fetchManufacturer);
const bra = axios.get(fetchBranch);
axios.all([cat, man, bra]).then(axios.spread((...responses) => {
setCategories(responses[0].data)
setManufacturer(responses[1].data)
setBranch(responses[2].data)
// use/access the results
})).catch(errors => {
// react on errors.
console.log(errors)
})
}, [])
return (
<div>
<div>
<label htmlFor="name">Name: </label>
<input type="text" id="name" name="name" />
</div>
<div>
<label htmlFor="category">Categories: </label>
<select name="category" id="category" >
{categories.map((category, index)=>(
<option key={index} value={category.id}>{category.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="category">Manufacturer: </label>
<select name="category" id="category" >
{manufacturer.map((man, index)=>(
<option key={index} value={man.id}>{man.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="category">Branch: </label>
<select name="branch" id="branch" >
{branch.map((bra, index)=>(
<option key={index} value={bra.id}>{bra.name}</option>
))}
</select>
</div>
<div>
<div>
<label htmlFor="has_size">Has Size: </label>
<input type="radio" id="has_size" name="has_size" />
</div>
</div>
<hr/>
{JSON.stringify(item, null, 2)}
<ItemVariation />
</div>
import React, { useState } from 'react'
function ItemVariation(props) {
const fields = {
default_product_variation: '',
color: '',
price: '',
quantity: '',
model_number: '',
sku: '',
barcode: '',
product_condition: '',
size: '',
extra_information: ''
}
const [variations, setVariations] = useState([fields])
const handleAddItem = () => {
setVariations([...variations, fields])
}
return (
<div>
{variations.map((variation, index) => (
<div key={index}>
<div>
<label htmlFor="default_product_variation">Make default: </label>
<input type="radio" id="default_product_variation" name="default_product_variation" />
</div>
<div>
<label htmlFor="color">Color: </label>
<input type="text" id="color" name="color" />
</div>
<div>
<label htmlFor="price">Price: </label>
<input type="number" id="price" name="price" />
</div>
<div>
<label htmlFor="wholesale_price">Wholesale Price: </label>
<input type="number" id="wholesale_price" name="wholesale_price" />
</div>
<div>
<label htmlFor="quantity">Quantity: </label>
<input type="number" id="quantity" name="quantity" />
</div>
<div>
<label htmlFor="model_number">Model Number: </label>
<input type="text" id="model_number" name="model_number" />
</div>
<div>
<label htmlFor="sku">SKU: </label>
<input type="text" id="sku" name="sku" />
</div>
<div>
<label htmlFor="barcode">Barcode: </label>
<input type="text" id="barcode" name="barcode" />
</div>
<div>
<div>
<label htmlFor="product_condition">Condition: </label>
<select name="product_condition" id="product_condition">
<option value="1">New</option>
<option value="2">Refurbished</option>
<option value="3">Repurposed</option>
</select>
</div>
</div>
<div>
<label htmlFor="size">Size: </label>
<input type="text" id="size" name="size" />
</div>
<div>
<label htmlFor="extra_information">Extra Information: </label>
<textarea id="extra_information" name="extra_information"></textarea>
</div>
<hr />
</div>
))}
<button type="button" onClick={handleAddItem}>Add Another Item</button>
{JSON.stringify(variations, null, 2)}
</div>
)
}
export default ItemVariation
How do I approach this?

React-routing -> routing renders on same page even after "exact" field

I wanted to render the sign up page when its clicked in the login page. I am having some issues with the routing. The sign up page is rendering on the same page. I have only created one route on the Login page ("/signup"). My goal is to just render a new page with just the sign up details. I thought by adding exact it would fix it.
import React from 'react';
import './Login.css';
import {Route, Link, BrowserRouter as Router} from 'react-router-dom'
import Signup from "./Signup";
import Home from "./Home";
function Login() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> login. </h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>login</button>
<Router>
<p class="message">New user ->
<Link to="/signup">Sign up</Link>
</p>
<Route path="/signup" exact={true} component={Signup} />
</Router>
<p class = "message"> Forgot Password or Forgot Username </p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Login;
import React from 'react';
import './Login.css';
function Signup() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> signup.</h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
<input type="email" placeholder="Email"/>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>Sign up</button>
<p class="message">Already have an account -> Login</p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Signup;
image of how the page looks with the login, and signup -> I have only set one route

render login component through
<Route path="/" exact component={login} />
in app.js file
hope this will solve your issue

try this in login.js component
import React from 'react';
import {Link} from 'react-router-dom'
function Login() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> login. </h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>login</button>
<p class="message">New user ->
<Link to="/signup">Sign up</Link>
</p>
<p class = "message"> Forgot Password or Forgot Username </p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Login;
in signup.js
import React from 'react';
function Signup() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> signup.</h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
<input type="email" placeholder="Email"/>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>Sign up</button>
<p class="message">Already have an account -> Login</p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Signup;
create routing component to redirect to other component
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Signup from './Signup'
const Routes = () => {
return(
<Switch>
<Route path="/signup" exact={true} component={Signup} />
</Switch>
)
}
export default Routes;

How to take input value from submit form and store in redux store variable?

I have made a bank account submit form. I want to save the data which is entered in the form into redux store. How can I take input value from form and store it in redux store variable ?
My client.js file has redux store and form.js is the component from which I need to get the input values.
client.js:
import { combineReducers, createStore } from 'redux';
const addUserReducer = (state={}, action) => {
switch(action.type){
case: "CHANGE_FIRSTNAME"{
state = {...state, firstname:action.payload }
break;
}
case: "CHANGE_LASTNAME"{
state = {...state, lastname:action.payload }
break;
}
case: "CHANGE_EMAILID"{
state = {...state, emailid:action.payload }
break;
}
case: "CHANGE_IBAN"{
state = {...state, iban:action.payload }
break;
}
case: "CHANGE_BANKNAME"{
state = {...state, bankname:action.payload }
break;
}
}
return state;
}
const reducers = combineReducers({
addUser:addUserReducer
})
const store = createStore(reducers);
store.subscribe(() => {
console.log('Store changed', store.getState());
})
store.dispatch({type: "CHANGE_FIRSTNAME", payload:"Will"});
store.dispatch({type: "CHANGE_LASTNAME", payload:"Groot"});
store.dispatch({type: "CHANGE_EMAILID", payload:"xyz#gmail.com"});
store.dispatch({type: "CHANGE_IBAN", payload:3234243242});
store.dispatch({type: "CHANGE_BANKNAME", payload:"XYZ"});
form.js:
import React, { Component } from "react";
import "./form.css";
class Form extends Component {
render() {
return (
<div>
<div id="center">
<form>
<div className="form-group">
<label for="firstname">First Name:</label>
<input type="firstname" className="form-control" id="firstname" />
</div>
<div className="form-group">
<label for="lastname">Last Name:</label>
<input type="lastname" className="form-control" id="lastname" />
</div>
<div className="form-group">
<label for="email">Email address:</label>
<input type="email" className="form-control" id="email" />
</div>
<div className="form-group">
<label for="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input type="bankacc" className="form-control" id="bankacc" />
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash" />
</button>
</div>
</div>
<div className="form-group">
<label for="bankname">Bank Name:</label>
<input type="bankname" className="form-control" id="bankname" />
</div>
<div className="form-group">
<button type="button" className="btn addbank">
+ Add bank account
</button>
</div>
<div className="form-group">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default Form;
Screenshot of my form:

I would recommend react-redux to connect your components with redux store, however it is still doable without it:
Create action creators that will update specific variable in the store:
import { bindActionCreators } from "redux";
const updateFirstName = name => ({ type: "CHANGE_FIRSTNAME", payload: name });
const updateLastName = lastName => ({
type: "CHANGE_LASTNAME",
payload: lastName
});
const updateEmail = email => ({ type: "CHANGE_EMAILID", payload: email });
const updateIban = iban => ({ type: "CHANGE_IBAN", payload: iban });
const updateBankName = bankName => ({
type: "CHANGE_BANKNAME",
payload: bankName
});
Now bind your action creators with dispatch, so calling actionCreators.updateFirsName('something') will actually dispatch an action to the store.
export const actionCreators = bindActionCreators(
{
updateFirstName,
updateLastName,
updateEmail,
updateIban,
updateBankName
},
store.dispatch
);
Now you only need to call each store-updating function whenever theres an change on the input:
import React, { Component } from "react";
import "./form.css";
import { actionCreators } from "/path/to/store";
class Form extends Component {
render() {
return (
<div>
<div id="center">
<form>
<div className="form-group">
<label for="firstname">First Name:</label>
<input
type="firstname"
className="form-control"
id="firstname"
onChange={e => actionCreators.updateFirstName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="lastname">Last Name:</label>
<input
type="lastname"
className="form-control"
id="lastname"
onChange={e => actionCreators.updateLastName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="email">Email address:</label>
<input
type="email"
className="form-control"
id="email"
onChange={e => actionCreators.updateEmail(e.target.value)}
/>
</div>
<div className="form-group">
<label for="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input
type="bankacc"
className="form-control"
id="bankacc"
onChange={e => actionCreators.updateIban(e.target.value)}
/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash" />
</button>
</div>
</div>
<div className="form-group">
<label for="bankname">Bank Name:</label>
<input
type="bankname"
className="form-control"
id="bankname"
onChange={e => actionCreators.updateBankName(e.target.value)}
/>
</div>
<div className="form-group">
<button type="button" className="btn addbank">
+ Add bank account
</button>
</div>
<div className="form-group">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default Form;

Redirect from inside a method in React [duplicate]

This question already has answers here:
Programmatically Navigate using react-router
(9 answers)
Closed 4 years ago.
I am relatively a beginner in ReactJS. I have been looking for the answer to this question for quite some time now. I have a form which is to be split into 2 parts. The first part contains a few text inputs and radio buttons. There is a Proceed button at the end of Part 1. The button is as below :
<div className="ProceedButton">
<button name="Proceed" type="button" onClick={this.handleClick}>Proceed</button>
</div>
This is the click handler for the Proceed Button :
handleClick(event){
console.log(this.state);
firebase.database()
.ref('registrations/'+this.state.userID)
.set(this.state);
firebase.database()
.ref('registrations/userID')
.set(this.state.userID);
}
So after clicking the Proceed button, I have to store the data on the database and move on to Part 2 of the form which is to be displayed on a new page. Is there a way I can redirect to Part 2 from within handleClick()? If not how else do I achieve it with minimum amount of code?
Thanks in advance.
Here's the complete code for part 1 of the form :
import React, { Component } from 'react';
import firebase from './firebase.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
class IntroForm extends Component{
constructor(){
super();
this.state={
userID:1,
state:"",
age:'',
ethnicity:"Hispanic or Latino",
race:"American Indian",
sex:"Male",
height:"",
weight:"",
};
console.log(this.state);
this.handleInputChange=this.handleInputChange.bind(this);
this.handleClick=this.handleClick.bind(this);
}
componentDidMount(){
const dbRef=firebase.database().ref().child('registrations');
const countRef=dbRef.child('userID');
countRef.on('value',snap=>{
this.setState({
userID:(snap.val()+1)
});
});
}
handleInputChange(event){
const target=event.target;
const name=target.name;
var value;
if((target.type==="radio"&&target.checked)||target.type!=="radio") value=target.value;
this.setState({
[name]:value
});
}
handleClick(event){
console.log(this.state);
firebase.database().ref('registrations/'+this.state.userID).set(this.state);
firebase.database().ref('registrations/userID').set(this.state.userID);
}
render() {
return(
<div>
<div className="State">
<div className="Head">
State
</div>
<div className="StateField">
<input
name="state"
type="text"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Age">
<div className="Head">
Age
</div>
<div className="AgeField">
<input
name="age"
type="number"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Ethnicity">
<div className="Head">
Ethnicity
</div>
<div className="EthnicityField">
<input name="ethnicity" type="radio" value="Hispanic or Latino" onClick={this.handleInputChange} defaultChecked /> Hispanic or Latino
<input name="ethnicity" type="radio" value="Non-Hispanic or Non-Latino" onClick={this.handleInputChange} /> Non-Hispanic or Non-Latino
</div>
<hr />
</div>
<div className="Race">
<div className="Head">
Race
</div>
<div className="RaceField">
<input name="race" type="radio" value="American Indian" onClick={this.handleInputChange} defaultChecked /> American Indian
<input name="race" type="radio" value="Asian" onClick={this.handleInputChange}/> Asian
<input name="race" type="radio" value="Native Hawaiian or Other Pacific Islander" onClick={this.handleInputChange}/> Hawaiian or Other Pacific Islander
<input name="race" type="radio" value="Black or African American" onClick={this.handleInputChange}/> Black or African American
<input name="race" type="radio" value="White" onClick={this.handleInputChange}/> White
</div>
<hr />
</div>
<div className="Sex">
<div className="Head">
Sex
</div>
<div className="SexField">
<input name="sex" type="radio" value="Male" onClick={this.handleInputChange} defaultChecked /> Male
<input name="sex" type="radio" value="Female" onClick={this.handleInputChange}/> Female
</div>
<hr />
</div>
<div className="Height">
<div className="Head">
Height
</div>
<div className="HeightField">
<input name="height" type="number" placeholder="In inches" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="Weight">
<div className="Head">
Weight
</div>
<div className="WeightField">
<input name="weight" type="number" placeholder="In pounds" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="ProceedButton">
<button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>
</div>
</div>
);
}
}
export default IntroForm;
App.js :
import React, { Component } from 'react';
import './App.css';
import TopBar from './js/TopBar.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
import IntroForm from './js/IntroForm.js';
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={StartButton}/>
<Route exact path="/intro" component={IntroForm}/>
</Switch>
</div>
);
}
}
const StartButton = withRouter(({ history }) => (
<button
type='button'
name="StartButton"
style={{"background":"#0000ff","textAlign":"center","color":"#ffffff","width":"100px","height":"30px"}}
onClick={() => { history.push('/intro') }}
>
Start
</button>
))
export default App;

You need to add a <Route /> in your <Switch /> for the second part of the form, and then in the first form you can do:
this.props.history.push('/form2').

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>