Превратите вызов jquery ajax в вызов React axios

Question

У меня проблема с настройкой вызова axios в React.У меня это работает с использованием Jquery в JavaScript.

Вот мой рабочий код Jquery ..

 $("#btn").on("click", function (event) {

    event.preventDefault();

    var filter = $("#IDXT001").val();

    var queryURL =
      "http://api/document?filter=idxt001" + "|" + filter;

    $.ajax({
      url: queryURL,
      method: "GET"
    }).then(data => {
        document.getElementById("test").innerHTML = data.map(function(i) {
          return i.Fields.map(function(e) {
            console.log(e);
            return "<p>" + e.DisplayName + ": " + e.DataValue + "</p>";
          }).join("<br/>");

      }).join('<br/>');
    });
  });

Итак, в React, который я новичок, у меня есть два отдельных API, которые я использую для создания формы поиска с первым API.и поиск в базе данных по второму API.

Мой второй API ..

const filter = "#IDXT001";
  getContracts: function() {
return axios.get(`http://api/ixmasterdocument? 
filter=idxt001|` + filter);
}

Здесь мои проблемы ...

        loadContracts = () => {
  API.getContracts()
  .then(res => {
    const contracts = res.data;
    console.log(contracts)
    this.setState({ contracts })
  })
}

Затем пытаюсьрендер здесь ...

  <div className="container">
 {this.state.contracts.map(contract => 
 <p> + {contract.Fields.DisplayName} + ": " + {contract.Fields.DataValue} + 
</p>
 )}
 </div>

Мне нужно добавить вторую функцию .map для отображения через массив Fields, но я не уверен, куда вставить код для этого.Вот данные поля, которые я пытаюсь получить

{Fields: Array(12), DocImage: {…}}
0: {Fields: Array(12), DocImage: {…}}
1: {Fields: Array(12), DocImage: {…}}

0:{Id: 0, DisplayName: "Contract #", DataValue: "2222", DataType: "TEXT", 
DataField: "IDXT001"}

Answer 1

Я смог заставить его работать таким образом, но я думаю, что мог бы быть и более «красивый» способ.Я все еще открыт для предложений.

  { this.state.contracts.map(contract => <p>{contract.Fields.map( docs => 
     docs.DisplayName + " : " +  docs.DataValue)}</p> )}