this.setStateは、配列の最後の値のみをプルしています

私はReactを初めて使用し、外部JSONファイルからこのネストされた配列をレンダリングする方法がわかりません。送金は、アクセスしてレンダリングする必要のあるネストされた値を持つ唯一の配列です。コンソールに正常にログを記録しますが、setStateでは分離しません。これがひどいように見える場合はお詫び申し上げます。

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      data,
      rName: "",
      rDescription: "", 
    }
  }

  componentDidMount(){
    console.log("Mounted!");
    this.display();
  };

  display = () => {
    for (var i = 0; i < data.length; i++){
      var remittanceList = data[i].Remittance;
     // console.log(remittanceList);
      for (var x = 0; x < remittanceList.length; x++){
        var rName = remittanceList[x].PayorName;
        var rDescription = remittanceList[x].Description;
        console.log(rName + rDescription);
        this.setState({rName, rDescription});

      }
    }
  }


  render() {
    var { rName, rDescription } = this.state;

    return (
      <div className="App">
      <Title/>
      {this.state.data.map((each, index) => (
      <PayInfo key={index}
        name={each.Payee.Name}
        fax={each.Payee.Fax}

        pan={each.Payment.PAN}
        cvv={each.Payment.CVV}
        exp={each.Payment.Exp}

        payorName={rName}
        description={rDescription}
      />
      ))}
      </div>
    );
  }
}
export default App;

そして、JSONファイルはこのようなものです。送金の量は非常に多いため、インデックスをハードコーディングして毎回検索することはできません。

[
  {
    "Payee": {
      "Name": "Bob",
      "Fax": "5555555555",
    },
    "Payment": {
      "PAN": 123456,
      "CVV": 123,
      "Exp": "1/2018"
    },
    "Remittance": [
      {
        "PayorName": "Me",
        "Description": "Hello World.",
      },
      {
        "PayorName": "You",
        "Description": "Hey world.",
      },
      {
        "PayorName": "Snoop",
        "Description": "Bye world.",
      }
    ]
  },

そして、これは私が最初に投稿すべきだったPayInfo.jsファイルです！これが私が以前に得た答えのいずれかを変えるかどうかわかりませんか？

import React from "react";
import "./PayInfo.css";

const PayInfo = props => (
<div>
    <div id="payee">
    <p>Payee</p>

        <p>{props.name}</p>
        <p>Fax: {props.fax}</p>

    </div>
    <hr></hr>

    <div id="payment">
        <p>Payment</p>
        <p>PAN: {props.pan}</p>
        <p>CVV: {props.cvv}</p>
        <p>Exp: {props.exp}</p>
    </div>
    <hr></hr>

    <div id="remittance">
        <p><strong>Remittance(s)</strong></p>
        <p>Payor: {props.payorName}</p>
        <p>Description: {props.description} </p>
    </div>
    <hr></hr>
    <hr></hr>


</div>
);

export default PayInfo;