How to use validate-state with react-bootstrap - reactjs

Question

I'm using react-bootstrap and I'm trying to validate a form using the validate-state option. I can't figure out how to use getValidationState() to return error when I submit a form which would turn the input field red. Currently when the form loads I get an error message in console ProfileCandidateForm.getValidationState ReferenceError: error is not defined.
If I remove getValidationState() I can submit the form and if it errors the returns the error to an alert box. I would like to change this to the validate-state in bootstrap.
Any help is appreciated. Still wrapping my head around React.
export default class ProfileCandidateForm extends Component {
constructor(props) {
super(props);
var profileCandidate = this.props.profileCandidate;
var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first;
this.state = {
firstName: firstName || "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
var profileCandidate = this.state;
insertProfileCandidate.call({profileCandidate}, (error) => {
if (error) {
alert(error.reason);
}
});
}
getValidationState() {
if (error) return 'error';
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup
validationState={this.getValidationState()}
>
<FormControl
type="text"
name="firstName"
value={this.state.firstName}
placeholder="First name"
onChange={this.handleChange}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup >
<Button type="submit">
Save
</Button>
</FormGroup>
</form>
)
}
}
ProfileCandidateForm.propTypes = {
profileCandidate: PropTypes.object.isRequired,
}

Answer 1

You need to reference the value (state) of the text field in the getValidationState() function. Then return null (for no visible validation), 'success' (for green visible validation), or 'error' (for red validation).
Here is one of my getValidationState funcs.
getValidationState() {
var value = this.state.value;
if (value===null || value==='') { return null; }
var valid = this._getValidity(value)
if (valid===true) {
return 'success';
} else {
return 'error';
}
}