How to set State variable for form Data - reactjs

Question

I have an Form Data input in react js application. I have tried below code to set Form Data state variable but value is showing as empty. Please check below code and advise how to do this...
Initial State :-
this.state = {
FormData: [{
UserId: 0,
FirstName: '',
LastName: '',
EmailId: '',
MobileNo: '',
DivisionId:'',
UserName: '',
Password: '',
ConfirmPassword: '',
RoleId: '',
UpdateUserName: localStorage.getItem("UserId"),
GridState: []
}],
};
Setting State Value in onchange event :-
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
HTML render:-
render() {
<div className="form-group row">
<label className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
<div className="col-sm-3">
<input type="text" name="FormData.FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" required onChange={this.onChangeHandler}/>
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
<div className="col-sm-3">
<input type="text" name="FormData.LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" required onChange={this.onChangeHandler}/>
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
<div className="col-sm-3">
<input type="email" name ="FormData.EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" required onChange={this.onChangeHandler}/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
<div className="col-sm-3">
<input type="text" name ="FormData.MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" onChange={this.onChangeHandler} />
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
<div className="col-sm-3">
<input type="text" name ="FormData.UserName" className="form-control form-control-sm" id="TxtUserName" placeholder="User Name" required onChange={this.onChangeHandler}/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-1 col-form-label col-form-label-sm">Password</label>
<div className="col-sm-3">
<input type="password" name ="FormData.Password" className="form-control form-control-sm" id="TxtPassword" placeholder="Password" required onChange={this.onChangeHandler}/>
</div>
Please check submit button handling code :-
onSubmitHandler = (event) => {
event.preventDefault();
console.log(JSON.stringify(this.state.FormData));
alert(JSON.stringify(this.state.FormData));
}

Answer 1

Flatten your state structure to be just the form fields
this.state = {
userId : 0,
firstName: '',
lastName : '',
emailId : '',
mobileNo : '',
divisionId :'',
userName : '',
password : '',
confirmPassword : '',
roleId : '',
updateUserName : localStorage.getItem("UserId"),
gridState : []
};
Leave onChangeHandler as-is since it handles a flat state structure already.
Update onSubmitHandler to stringify the state object representing the form fields
onSubmitHandler = (event) => {
event.preventDefault();
console.log(JSON.stringify(this.state));
alert(JSON.stringify(this.state));
}
Update form field names to match that in state. Example:
<input
type="text"
name="firstName" // <-- should match key in state
className="form-control form-control-sm"
id="TxtFirstName"
placeholder="First Name"
required
onChange={this.onChangeHandler}
/>
Note: camelCased all keys/names by normal naming convention.

Answer 2

The value of name in component's state and in HTML are not the same -:
In HTML it is -:
FormData.UserId
similarly for all other fields....
In JS it is only -:
UserId
similarly for all other fields....
FormData prefix is not there in state
you can do something like this -:
onChangeHandler = ({target: {name, value} }) => {
name = name.split(".")[1];
const FormData = {...this.state.FormData, [name]: value};
this.setState(FormData);
}