reset uncontrolled component content after submitting the form + react + jsx - reactjs

Question

I have a already built React form, which works fine expect reset functionality. It has used uncontrolled components bit different way. I am looking for what I need to follow, change the code to achieve my goal.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import * as React from "react";
import WidgetComponent from './../../lib/WidgetComponent';
import jQuery from 'jquery';
import InputListComponent from './components/InputListComponent';
import FormInputComponent from './components/FormInputComponent';
import formTextInputComponent from './components/formTextInputComponent';
import FormInputPasswordComponent from './components/FormInputPasswordComponent';
import FormSelectComponent from './components/FormSelectComponent';
import SubmitBtnListComponent from './components/SubmitBtnListComponent';
import SubmitBtnComponent from './components/SubmitBtnComponent';
import ErrorListBox from './components/ErrorListBox';
import EmailPromptModal from './components/EmailPromptModal';
import formHandlerInterfaceFactory from './lib/formHandlerInterface';
import formValidator from './lib/formValidators';
import {generateJQueryAjaxConfigFromPlaceholders} from './../../lib/GenerateJQueryAjaxConfig';
import './styles/registration-form.scss';
export default class ControlPanelCreateAccounts extends WidgetComponent {
constructor(props) {
super(props);
this.state = {
form: {
firstName: "",
lastName: "",
username: "",
password: "",
confirmPassword: "",
email: "",
phone: "",
accessLevel: -1,
},
userRoles: [],
validInputs: {
firstName: false,
lastName: false,
username: false,
password: false,
confirmPassword: false,
email: false,
phone: false,
accessLevel: false,
},
defaultValue: {
firstName: "",
lastName: "",
username: "",
password: "",
confirmPassword: "",
email: "",
phone: "",
accessLevel: -1,
},
errors: [],
submitService: null,
userRoleService: null,
newUserId: null,
};
this.onFormInputChange = this.onFormInputChange.bind(this);
this.onServicesCalled = this.onServicesCalled.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
this.formElementInvalid = this.formElementInvalid.bind(this);
this.formElementValid = this.formElementValid.bind(this);
this.postWidgetLoad = this.postWidgetLoad.bind(this);
this.createUserRequest = this.createUserRequest.bind(this);
this.createUserRoleRequest = this.createUserRoleRequest.bind(this);
this.onResetReceived = this.onResetReceived.bind(this);
this.onFormInputReset = this.onFormInputReset.bind(this);
}
onResetReceived(){
console.log('onResetReceived');
let newState = Object.assign(this.state.form, {
firstName : "",
});
this.setState(newState);
console.log(this.state.form);
}
postWidgetLoad(widget) {
EmailPromptModal.service = widget.services[2];//??
let submitService = widget.services[1];//1
let userRoleService = widget.services[2];//2
//this.storeState({ submitService });
let newState = Object.assign(this.state, {
submitService: submitService,
userRoleService: userRoleService
});
this.setState(newState);
}
validate() {
console.log('validating pre-submit');
let errors = Object.keys(this.state.validInputs).reduce((accum, current) => {
console.log('state of accumulator is: ');
console.log(accum);
console.log('current iteration is: ' + current);
//console.log('password and reType passwords are : ');
//console.log(this.state.form.password + " :: " + this.state.confirmPassword );
if (this.state.validInputs[current] === false) {
console.log('current input is invalid');
this.validate = this.validate.bind(this);
if (current === 'firstName') {
accum.push('The first name field is either empty or contains invalid characters');
}
if (current === 'lastName') {
accum.push('The last name field is either empty or contains invalid characters');
}
if (current === 'email') {
accum.push('The email field is empty or is not a valid email address');
}
if (current === 'phone') {
accum.push('The phone field is empty or is not a valid phone number');
}
if (current === 'password') {
accum.push('The password field is empty or contain less than 5 characters or contain invalid character');
}
if (current === 'confirmPassword') {
accum.push('The passwords mismatched');
}
if (current === 'accessLevel') {
accum.push('You must select a accessLevel from the drop-down menu.');
}
}
return accum;
}, []);
console.log('final error list looks like: ');
console.log(errors);
this.storeState({
errors: errors
});
return errors.length === 0;
}
onServicesCalled() {
let response = arguments[0][0].data;
let roleList = [];
if (response) {
response.map(element => {
roleList.push({val: element.id, text: element.role_name});
});
}
let newState = Object.assign(this.state, {
userRoles: roleList
});
this.setState(newState);
}
onFormInputChange(ev, legend) {
let value = ev.target.value;
let form = this.state.form;
form[legend] = value;
this.storeState({
form
});
formElementInvalid(elem) {
let name = elem.name;
let stateUpdateObj = this.state.validInputs;
stateUpdateObj[name] = false;
this.storeState({validInputs: stateUpdateObj});
if (name !== 'status') {
elem.classList.add('input-error');
} else {
document.getElementById('status-error-field').classList.add('visible');
}
}
formElementValid(elem) {
let name = elem.name;
let stateUpdateObj = this.state.validInputs;
stateUpdateObj[name] = true;
this.storeState({validInputs: stateUpdateObj});
if (name !== 'status') {
elem.classList.remove('input-error');
} else {
document.getElementById('status-error-field').classList.remove('visible');
}
}
onFormSubmit() {
if (this.validate()) {
console.log("validate got passed");
console.log(this.state.form);
var id;
// match password fields
if (this.state.form.password !== this.state.form.confirmPassword) {
let stateUpdateObj = this.state.validInputs;
stateUpdateObj['confirmPassword'] = false;
this.storeState({validInputs: stateUpdateObj});
this.onFormSubmit();
} else {
jQuery.when(this.createUserRequest()).done((r) => {
console.log("submit for createUser is success reload!");
console.log(r);
id = r.data.id;
jQuery.when(this.createUserRoleRequest(id)).done((r) => {
console.log("submit for createUserRole is success reload!");
console.log(r);
if(r.data.wasSuccessful){
console.log("create UserRole is successful, So reload the table ");
// do page refresh here
window.pubsub.publish('isp.reload-control-users', {});
//reset the form
console.log("reset the form contents");
this.onResetReceived();
}
}).fail((xhr, status, error) => {
console.log(status);
console.error(error);
alert('An error occured while submitting this request, if this issue persists please contact support.');
});
let newState = Object.assign(this.state, {
newUserId: r.data.id
});
this.setState(newState);
}).fail((xhr, status, error) => {
console.log(status);
console.error(error);
alert('An error occured while submitting this request, if this issue persists please contact support.');
});
}
}
}
//create a record in is_auth_roles table
createUserRoleRequest(id) {
let config = generateJQueryAjaxConfigFromPlaceholders(this.state.userRoleService, {'userId': id});
config.headers['Content-Type'] = 'application/json';
config.headers['Accept'] = '*/*';
config.data = JSON.stringify({
'roleId': this.state.form.accessLevel,
'type': 'add'
});
console.log("submit config of createUserRoleRequest() is: ");
console.log(config);
return jQuery.ajax(config);
}
createUserRequest() {
let config = generateJQueryAjaxConfigFromPlaceholders(this.state.submitService, {});
config.headers['Content-Type'] = 'application/json';
config.headers['Accept'] = '*/*';
config.data = JSON.stringify({
firstName: this.state.form.firstName,
lastName: this.state.form.lastName,
username: this.state.form.username,
phone: this.state.form.phone,
password: this.state.form.password,
confirmPassword: this.state.form.confirmPassword,
email: this.state.form.email,
accessLevel: this.state.accessLevel
});
console.log("submit config is: ");
console.log(config);
return jQuery.ajax(config);
}
render() {
return (
<div className="registration-form">
<h3 className="component-title"><i className="fa fa-table" aria-hidden="true"></i> User <span> Registration</span></h3><br/>
<InputListComponent>
{/*onValid={this.formElementValid} />*/}
<formTextInputComponent legend="firstName" label="First Name" placeholder="First Name" onChange={this.onFormInputChange} validator={formValidator.nameValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.firstName} value={ this.state.value}
onValid={this.formElementValid} />
<FormInputComponent legend="lastName" label="Last Name" placeholder="Last Name" onChange={this.onFormInputChange} validator={formValidator.nameValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.lastName}
onValid={this.formElementValid}/>
<FormInputComponent legend="username" label="User Name" placeholder="User Name" onChange={this.onFormInputChange} validator={formValidator.nameValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.username}
onValid={this.formElementValid}/>
<FormInputPasswordComponent legend="password" label="Password" placeholder="Password" onChange={this.onFormInputChange} validator={formValidator.passwordValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.password}
onValid={this.formElementValid}/>
<FormInputPasswordComponent legend="confirmPassword" label="Confirm Password" placeholder="Confirm Password" onChange={this.onFormInputChange} validator={formValidator.passwordValidator} default = {this.state.defaultValue.confirmPassword}
onInvalid={this.formElementInvalid} onValid={this.formElementValid}/>
<FormInputComponent legend="email" label="Email Address" placeholder="Email" onChange={this.onFormInputChange} validator={formValidator.emailValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.email}
onValid={this.formElementValid}/>
<FormInputComponent legend="phone" label="Phone Number" placeholder="Phone Number" onChange={this.onFormInputChange} validator={formValidator.phoneValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.phone}
onValid={this.formElementValid}/>
<FormSelectComponent legend="accessLevel" data={this.state.userRoles} onChange={this.onFormInputChange} validator={formValidator.statusValidator} onInvalid={this.formElementInvalid} default = {this.state.defaultValue.accessLevel}
onValid={this.formElementValid}/>
</InputListComponent>
<ErrorListBox errorList={this.state.errors}/>
<button className="dataTable-modal-btn click-btn" onClick={this.onFormSubmit}>CREATE USER</button>
</div>
);
}
}
window.ControlPanelCreateAccounts = ControlPanelCreateAccounts;
window.CurrentWidget = window.ControlPanelCreateAccounts;
this is formInputComponent code
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
const FormInputComponent = (props) => {
const onChangeHandler = (ev) => {
if(props.validator(ev.target.value)) {
props.onChange(ev, props.legend);
props.onValid(ev.target);
} else {
props.onInvalid(ev.target);
}
};
console.log('props.defaultValue');
console.log(props.legend);
console.log(props.default);
console.log(props.value);
return (
<div className="form-row">
<label>{props.label}</label><br />
<input name={props.legend} type="text" placeholder={props.placeholder} onChange={onChangeHandler} defaultValue={props.default || ''} value={props.value}/>
</div>
);
};
FormInputComponent.propTypes = {
legend: React.PropTypes.string,
label: React.PropTypes.string,
placeholder: React.PropTypes.string,
onChange: React.PropTypes.func,
validator: React.PropTypes.func,
onInvalid: React.PropTypes.func,
onValid: React.PropTypes.func,
default: React.PropTypes.string,
};
export default FormInputComponent;

Answer 1

If you want setState inside of onResetReceived to reset the form, you'll need to set the value prop of each form field. The default prop gets sent to FormInputComponent as the defaultValue of the input, but you can also see it accepts a value={props.value} as well (even though value is not defined in its PropTypes. From the parent set
<FormInputComponent value={this.state.form.firstName} ... />
This will ensure changing this.state.form via setState will update each form field.