Im only getting the username and password field? React - reactjs

Question

Im trying to use post data but the only thing im getting back from the form is the username and password, What am i doing wrong? i want to get the teacher data too inside the state like fname, lname, mname etc. Also why is it only the username and password is getting posted or serialized. Thanks so much in advance
class Teachers extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedData: {},
tableData: [{
id: '',
email: '',
password: '',
}],
username: '',
password: '',
teacher: [{
employeeNo:'',
prefixName: '',
fname: '',
lname: '',
middleInitial: '',
sex: '',
citizenship: '',
status: '',
permanentAddress: '',
presentAddress: '',
bday: '',
contactNo: '',
emailAdd: '',
emergencyContactNo: '',
}],
}
this.editedData = params => {
console.log(params);
};
this.toggleModal = this.toggleModal.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.addNotification = this.addNotification.bind(this);
this.handleChange = this.handleChange.bind(this);
}
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
};
//request the token
async handleSubmit(event) {
event.preventDefault();
const getCred = await fetch('http://tfismartasp-001-site10.btempurl.com/api/Teacher/Register', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'ApiKey': "Secret"
},
method: "POST",
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
prefixName: this.state.teacher.prefixName,
fname: this.state.teacher.fname,
lname: this.state.teacher.lname,
middleInitial: this.state.teacher.middleInitial,
sex: this.state.teacher.sex,
citizenship: this.state.teacher.citizenship,
status: this.state.teacher.Status,
permanentAddress: this.state.teacher.permanentAddress,
PresentAddress: this.state.teacher.presentAddress,
bday: this.state.teacher.bday,
contactNo: this.state.teacher.contactNo,
emailAdd: this.state.teacher.emailAdd,
emergencyContactNo: this.state.teacher.emergencyContactNo,
}),
});
const data = await getCred.json();
console.log(data);
}
<Modal isOpen={this.state.modalDialog} className="modal-lg" fade={false} toggle={() => this.toggleModal("modalDialog")}>
<ModalHeader toggle={() => this.toggleModal("modalDialog")}>
Edit Profile
</ModalHeader>
<form className="margin-bottom-0" onSubmit={this.handleSubmit}>
<ModalBody>
<h3><label className="control-label">Personal Information </label></h3>
<label className="control-label">Name <span className="text-danger">*</span></label>
<div className="row row-space-10">
<div className="col-md-2 m-b-15">
<input type="text" className="form-control" placeholder="Prefix" name="prefixName" value={this.state.teacher.prefixName} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<input type="text" className="form-control" placeholder="First name" name="fname" value={this.state.teacher.fname} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<input type="text" className="form-control" placeholder="Last name" name="lname" value={this.state.teacher.lname} onChange={this.handleChange} required="" />
</div>
<div className="col-md-2 m-b-15">
<input type="text" className="form-control" placeholder="Middle name" name="middleInitial" value={this.state.teacher.middleInitial} onChange={this.handleChange} required="" />
</div>
</div>
<div className="row row-space-10">
<div className="col-md-4 m-b-15">
<label className="control-label">Gender <span className="text-danger">*</span></label>
<select className="form-control" name="sex">
<option value={this.state.teacher.sex} onChange={this.handleChange}>MALE</option>
<option value={this.state.teacher.sex} onChange={this.handleChange}>FEMALE</option>
</select>
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Birthdate <span className="text-danger">*</span></label>
<input type="date" className="form-control" placeholder="Birthdate" name="bday" value={this.state.teacher.bday} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Citizenship <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Citizenship" name="citizenship" value={this.state.teacher.citizenship} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Status <span className="text-danger">*</span></label>
<select className="form-control" name="status" placeholder="status" >
<option value={this.state.teacher.status} onChange={this.handleChange}>Single</option>
<option value={this.state.teacher.status} onChange={this.handleChange}>Married</option>
</select>
</div>
</div>
<hr/>
<h3><label className="control-label">Account Information </label></h3>
<div className="row row-space-10">
<div className="col-md-4 m-b-15">
<label className="control-label">Employee Number <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Employee No." name="employeeNo" value={this.state.teacher.employeeNo} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Username <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Password <span className="text-danger">*</span></label>
<input type="password" className="form-control" placeholder="Password" name="password" value={this.state.password} onChange={this.handleChange} required="" />
</div>
</div>
<hr/>
<h3><label className="control-label">Contact Information </label></h3>
<div className="row row-space-10">
<div className="col-md-4 m-b-15">
<label className="control-label">Permanent Address <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Permamnent Address" name="permanentAddress" value={this.state.teacher.permanentAddress} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Present Address <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Present Address" name="presentAddress" value={this.state.teacher.presentAddress} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Contact Number <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Contact No." name="contactNo" value={this.state.teacher.contactNo} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Email Address <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Email Address" name="emailAdd" value={this.state.teacher.emailAdd} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Emergency Number <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Emergency No." name="emergencyContactNo" value={this.state.teacher.emergencyContactNo} onChange={this.handleChange} required="" />
</div>
</div>
</ModalBody>
<ModalFooter>
<button onClick={() => {
this.addNotification('success', 'Success', 'All data has been successfully saved', 'bottom-right')
this.toggleModal("modalDialog")
}} className="btn btn-sm btn-success">Save</button>
<button
className="btn btn-white btn-sm"
onClick={() => this.toggleModal("modalDialog")} >
Close
</button>
</ModalFooter>
</form>
</Modal>

Answer 1

If you are talking about only one teacher object, you can change the teacher to an object. Just remove [ and ] between the teacher object.