How to show validation errors on form using React - reactjs

Question

After submitting a form I'm running validation and returning an array of errors. I'm using map to break the array into a group of objects, however, I'm having trouble figuring out how to use this.state.errors to show the errors on the form under the right FormControl field. Any help here would be great.
What errors look like after array is broken into
Object {name: "name.first", type: "required", value: undefined}
Object {name: "name.last", type: "required", value: undefined}
React component with form
getValidationState() {
var errors = this.state.errors;
if (!$.isEmptyObject(errors))
{
console.log("sefsefsdf");
errors.map(element => {
var errors = element;
});
}
if(errors) 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 />
{this.state.errors && <HelpBlock>{this.state.errors}</HelpBlock>}
</FormGroup>
<FormGroup >
<FormControl
type="text"
name="lastName"
value={this.state.lastName}
placeholder="Last name"
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup >
<Button type="submit">
Save
</Button>
</FormGroup>
</form>
)
}
UPDATE

Answer 1

So unless I've misunderstood your question, you simply need to map your errors array. Like so:
{this.state.errors &&
<HelpBlock>
{this.state.errors.map((error, i) => <p key={i}>{error.value}</p>}
</HelpBlock>
}
This will return a <p> tag containing the error message. You can obviously change the element to something else.
For more about this, have a look at Array.map() over at MDN.
edit: If errors isn't an array initially, you'll get an error that map isn't a function. Make sure that the errors array is initialized as an array and nothing else. However, you can make an extra check in your code to assure it's an array:
{this.state.errors && this.state.errors.length &&
This doesn't only check that errors exists and is truthy, but that the property length exists as well. This will prevent errors on the common mistakes, however if errors for some reason is a string, the condition will be true as well. If you want a more solid solution, you could do:
{this.state.errors instanceof Array &&