Get React to display individual error messages under form input field

I'm submitting a form that returns an array of errors and I'm having trouble figuring out how to get each individual error to appear under the correct input field. Right now all the errors print under each input field. I'm using react-bootstrap. Any help would be appreciated.

getValidationState() {
  var errors = this.state.errors;
  if (!$.isEmptyObject(errors))
  {
    errors.forEach(function(error) {
      console.log("error:", error.name);
    });
  }
}

render() {
  const inputProps = {
    value: this.state.address,
    onChange: this.onChange,
  }
  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 && this.state.errors.length &&
          <HelpBlock>
            {this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
          </HelpBlock>
        }


      </FormGroup>
      <FormGroup >
        <FormControl
          type="text"
          name="lastName"
          value={this.state.lastName}
          placeholder="Last name"
          onChange={this.handleChange}
        />
        {this.state.errors && this.state.errors.length &&
          <HelpBlock>
            {this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
          </HelpBlock>
        }
      </FormGroup>


      <FormGroup >
        <Button type="submit">
          Save
        </Button>
      </FormGroup>
    </form>
  )
}