Отображение сообщения об ошибке от API в каждом текстовом поле Dynami c в React

Question

У меня есть страница в реагировании js, которая отображает вопросы, заданные динамически из Q API. После отправки ответ API дает ответ в виде [Код Q: значение недопустимо, Код Q2: значения не находятся в диапазоне ...]. При получении ошибки я должен выделить каждое текстовое поле и показать ответ об ошибке внизу, а также прокрутить страницу до первого ошибочного поля ввода. Пожалуйста, помогите мне, как динамически выделить ошибочные текстовые поля, отобразить сообщение об ошибке и перейти к первому ошибочному полю.

 renderControl = (model, index) => {
var id;
var key;
if (QuestionService.LABEL_WIDGET_NAME != undefined) {
  key = QuestionService.ID;
  id =
    "lbl" +
    QuestionService.LABEL_WIDGET_NAME.replace(/\s/g, "")
      .toLowerCase()
      .substring(0, 10);
}

switch (QuestionService.WIDGET_TYPE) {
  case "INTEGER_FIELD":
  case "SMALL_TEXTBOX":
  case "PERCENTAGE":
  case "MEDIUM_TEXTBOX":
  case "REAL_NUMBER":
  case "MONEY":
    if (
      QuestionService.ATTRIBUTE_TYPE_CODE === "CALCULATED" ||
      QuestionService.ATTRIBUTE_TYPE_CODE === "RESULT"
    ) {
      return (
        <input
          type="text"
          name={QuestionService.LABEL_CODE}
          readOnly
          id={key}
          key={QuestionService.LABEL_CODE}
          className="txtSize"
          ref={(element) => (this.textInput = element)}
        ></input>
      );
    }
    return (
      <input
        type="text"
        id={id}
        key={QuestionService.LABEL_CODE}
        // value={this.state.userEnteredInputs[QuestionService.LABEL_CODE]}
        name={QuestionService.LABEL_CODE}
        className="txtSize"
        onChange={this.handleTextChange}
        onBlur={this.handleTextChange}
        ref={(element) => (this.textInput = element)} //Refs but failed
      ></input>
    );
  case "NARROW_DROPDOWN":
  case "SELECTION_DIALOG":
    var values = "";
    var values = this.bindDatatoDropdown(QuestionService.RANGE_OBJECT);
    values.unshift("Please select");
    return (
      <div>
        <select
          name={QuestionService.LABEL_CODE}
          onBlur={this.handleDropdownChange}
          className="dropdown"
          defaultValue={{ label: "Please select", value: 0 }}
          //   value={this.state.userEnteredInputs[QuestionService.LABEL_CODE]}
          onChange={this.handleDropdownChange}
        >
          {values.map((item) => {
            if (item == "Please select") {
              return <option selected>{item}</option>;
            } else {
              return <option>{item}</option>;
            }
          })}
        </select>
      </div>
    );
  case "DATE_FIELD":
    return (
      <input
        name={QuestionService.LABEL_CODE}
        type="date"
        date-format="DD-MMM-YYYY"
        onBlur={this.handleDateChange}
        onChange={this.handleDateChange}
      ></input>
    );
  case "BOOLEAN_FIELD":
    return (
      <div className="some-class">
        <input
          type="radio"
          className="radio"
          onBlur={this.statusHandler}
          name={QuestionService.LABEL_CODE}
          id={id}
          value="Yes"
          onChange={this.statusHandler}
        />
        <label htmlFor={QuestionService.LABEL_CODE}>Yes</label>
        <input
          type="radio"
          className="radio"
          onBlur={this.statusHandler}
          name={QuestionService.LABEL_CODE}
          onChange={this.statusHandler}
          value="No"
          id={id}
        />
        <label htmlFor={QuestionService.LABEL_CODE}>No</label>
      </div>
    );
  default:
    return;
}

};

------------ ------------ Ответ API "INPUT_DATE: атрибут не является допустимой датой", "INPUT_STATUS: атрибут не входит в диапазон", "BALANCE: атрибут не является допустимым числом (в настоящее время текст или отсутствует) "," DEVELOPMENT_LIMIT: Атрибут не является допустимым числом (в настоящее время текст или отсутствует) "," FIRSTDD_RENEW_DATE: атрибут не является действительной датой "," EXPIRY_DATE: атрибут не является действительной датой "," DEV_DRAWN_AMT: Атрибут не является действительным номером (в настоящее время текст или отсутствует) "," COMPARABLES_STRENGTH: атрибут за пределами диапазона "," MARKET_CONDITIONS: атрибут за пределами диапазона "," LOCATION: атрибут за пределами диапазона "," PROPOSED_SECURITY_VALUE: текущие и предложенные значения безопасности равны NULL или Ноль "]

Я пробовал REFS, но не работает, есть ли хороший способ сделать это ... Спасибо