javascript - 返された API データを反応状態として設定する

Question

この反応コンポーネントの状態を以下に設定しようとしています。変数 rankAndTeam には、以下の「prints=>」データが含まれています。「Washington Capitals」を this.state.teamRank["0"] に設定したい...「New York Islander」を this.state.teamRank["1"] に設定したいなど....

    this.state = {
      teamRank: {
        0: "",
        1: "",
        2: "",
        3: "",
        4: "",
        5: "",
        6: "",
        7: "",
      }
    }
  }

  async componentDidMount() {
    const url2 = 'https://statsapi.web.nhl.com/api/v1/standings';
    const response2 = await fetch(url2);
    const data2 = await response2.json();
    data2.records.map((element) => {
      element.teamRecords.map((element2, index) => {
        const teamNames = element2.team.name;
        const rankAndTeam = teamNames + index;
        console.log(rankAndTeam);
      });
    }

版画

Main.js:80Washington Capitals0
Main.js:80 New York Islanders1
Main.js:80 Pittsburgh Penguins2
Main.js:80 Carolina Hurricanes3
Main.js:80 Columbus Blue Jackets4
Main.js:80 Philadelphia Flyers5
Main.js:80 New York Rangers6
Main.js:80 New Jersey Devils7

反応コンポーネント:

Want to put this.state.teamRank.['0'] where Name0 is...
Want to put this.state.teamRank.['1'] where Name1 is etc... 

  <tr>
    <th></th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>Name0</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name1</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name2</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>