How to manage state with complex json object in react js - reactjs

Question

Below is the code I have so far, my state isn't working as expected with a bit complex object, I was able to work with a simple object with no nested objects in my state and its working as expected.
state assignment works fine if I don't use personalInfo or contactInfo inside the customer object and used all the properties and create simple customer object
import React, {PropTypes} from 'react';
import {Grid,Row,Col,Button,Label} from 'react-bootstrap';
import {connect} from 'react-redux';
import * as customerActions from '../../actions/customerActions';
import {bindActionCreators} from 'redux';
class AddCustomer extends React.Component{
constructor(props , context){
super(props , context);
this.state={
customer:{
personalInfo:{
firstName:"",
lastName:"",
dob:"",
ssn:""
},
contactInfo:{
address:"",
addressLine2:"",
city:"",
state:"",
zip:"",
phoneNumber:"",
emailAddress:""
}
}
};
this.handleChange = this.handleChange.bind(this);
this.onClickCancel = this.onClickCancel.bind(this);
this.onClickSave = this.onClickSave.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
customer: {
personalInfo:{
},
contactInfo:{
},
...this.state.customer,
[name]: value
}
});
console.log(this.state.customer);
}
onClickCancel(){
}
onClickSave(){
this.props.actions.createCustomer(this.state.customer);
}
render() {
return (
<div className="container-fluid">
<Grid>
<Row className="show-grid">
<Col xs={10} md={10}><b>ADD A LEAD</b></Col>
<Col xs={2} md={2}>
<Button>×</Button>
</Col>
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
<hr/>
</Col>
</Row>
<p><b>Personal Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>First Name*</Label></Row>
<Row><input name="personalInfo.firstName" type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Last Name*</Label></Row>
<Row><input name="personalInfo.lastName" type="text" value={this.state.customer.personalInfo.lastName} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>Date of Birth*</Label></Row>
<Row><input name="personalInfo.dob" type="text" value={this.state.customer.personalInfo.dob} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>SSN*</Label></Row>
<Row><input name="personalInfo.ssn" type="text" value={this.state.customer.personalInfo.ssn} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<p><b>Contact Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>Address</Label></Row>
<Row><input name="contactInfo.address" type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange}/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Address Line 2</Label></Row>
<Row><input name="contactInfo.addressLine2" type="text" value={this.state.customer.contactInfo.addressLine2} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>City</Label></Row>
<Row><input name="contactInfo.city" type="text" value={this.state.customer.contactInfo.city} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>State</Label></Row>
<Row><input name="contactInfo.state" type="text" value={this.state.customer.contactInfo.state} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>Zip</Label></Row>
<Row><input name="contactInfo.zip" type="text" value={this.state.customer.contactInfo.zip} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={4} md={4}>
<Row><Label>Phone Number</Label></Row>
<Row><input name="contactInfo.phoneNumber" type="text" value={this.state.customer.contactInfo.phoneNumber} onChange={this.handleChange}/></Row>
</Col>
<Col xs={4} md={4}>
<Row><Label>Email Address</Label></Row>
<Row><input name="contactInfo.emailAddress" type="text" value={this.state.customer.contactInfo.emailAddress} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<hr/>
</Row>
<Row className="show-grid">
<input className="pull-right" type="submit" onClick={this.onClickCancel} value="Cancel"/>
<input className="pull-right" type="submit" bsStyle="primary" onClick={this.onClickSave} value="Add"/>
</Row>
</Grid>
</div>
);
}
}
AddCustomer.propTypes={
actions:PropTypes.object.isRequired,
customer:PropTypes.array.isRequired
};
function mapStateToProps(state, ownProps) {
return{
customer:state.customer
};
}
function mapDispatchToProps(dispatch) {
return{
actions: bindActionCreators(customerActions,dispatch)
};
}
export default connect(mapStateToProps,mapDispatchToProps)(AddCustomer);

Answer 1

I'm not sure what's the unxepcted result do you receive, but I gues you may try something like this:
handleChange(type, name, event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
customer: {
...this.state.customer,
[type]:{
...this.state.customer[type],
[name]: value
}
}
});
console.log(this.state.customer);
}
...
render() {
...
<Row><input type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange.bind(this, 'personalInfo', 'firstName')} required="true"/></Row>
...
<Row><input type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange.bind(this, 'contactInfo', 'address')}/></Row>
...
}