React updating form fields from backend - reactjs

Question

I am working on a project using React and Redux where I need to update the data from the back end in the form. Since the data that needs to be updated will be fetched from the backend, I am initializing component state from props and the form values will be assigned from component state. The issue that I am having is that some of the values I am fetching from the back end are empty(undefined) at first and need to be added from the form and that is throwing error when the component is rendered. Please refer my React class below, any suggestion on how to avoid the component from throwing an error if the props value is undefined is appreciated.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import Radium from 'radium';
import ProfileBio from '../common/commonProfileBio';
const form = reduxForm({
form: 'profileEdit',
fields: [ 'firstName', 'lastName', 'email', 'educations'],
// validate
});
class ProfileBioList extends Component {
constructor(props) {
super(props);
this.state = {
editing: false,
//this is throwing error since the values are undefined initially
firstName: this.props.data.bio.firstName,
lastName: this.props.data.bio.lastName,
email: this.props.data.email
};
this.toggleEditing = this.toggleEditing.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.onChange = this.onChange.bind(this);
}
getStyles() {
return {
ulStyles: {
listStyle: "none"
},
listItem: {
borderRadius: 0,
boxShadow: "1px 1px 1px lightgrey"
}
}
}
handleUpdate(e) {
e.preventDefault();
this.props.updateProfile({bio:this.state});
}
renderItemOrEditField() {
const styles = this.getStyles();
if(this.state.editing !== true){
return (
<ProfileBio
toggleEditing={this.toggleEditing}
data={this.props.data}
styles={styles}/>
);
} else {
return (
<div className="row ">
<div className="col-xs-10 col-xs-offset-1">
<form>
<ul className="list-group-item" style={styles.ulStyles}>
<li >
<label>First Name:</label>
<input
name="firstName"
type="text"
className="form-control"
value={this.state.firstName}
onChange={this.onChange}/>
</li>
<li className="">
<label className="">Last Name:</label>
<input
name="lastName"
type="text"
className="form-control"
value={this.state.lastName }
onChange={this.onChange}/>
</li>
<li className="">
<label>Email:</label>
<input
name="email"
type="text"
className="form-control"
value={this.state.email}
onChange={this.onChange}/>
</li><br />
<li className="btn-group">
<button
onClick={this.handleUpdate}
action="submit"
className="btn btn-primary">Update</button>
<button
onClick={this.toggleEditing}
className="btn btn-default">Cancel</button>
</li>
</ul>
</form>
</div>
</div>
);
}
}
toggleEditing(e){
e.preventDefault();
this.setState({editing: !this.state.editing});
}
render(){
return (
<div>
{this.renderItemOrEditField()}
</div>
);
}
}
export default connect(null)(form(ProfileBioList));

Answer 1

The easiest way would be to use ES6 destructuring assignment with default value. So your constructor would look something like this...
class ProfileBioList extends Component {
constructor(props) {
super(props);
const {
bio: {
firstName = '',
lastName = '',
} = {},
email = '',
} = props.data;
this.state = {
editing: false,
firstName: firstName,
lastName: lastName,
email: email
};
this.toggleEditing = this.toggleEditing.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.onChange = this.onChange.bind(this);
}
...
}