title: React mapping objects, targeting errors
body: <p>I have some troubles mapping fetched objects, i know it's a known problem but it's been two days i'm stuck so i come asking for some help.</p>
  
  <p>I'm trying to output data on an ul from an api but i either have errors or nothing gets output, i know that i am targeting my data inside my object the wrong way, it's the first time i'm trying to target an object with this kind of keys</p>
  
  <p>I have an object 'names' looking like that:</p>
  
  <p><a href="https://i.stack.imgur.com/ybU8G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ybU8G.png" alt="enter image description here"></a></p>
  
  <pre><code>[Array(20)]
    0: Array(20)
      0:
        avatar: ""
        country: "RU"
        games: (3) [{…}, {…}, {…}]
        nickname: "d2mash"
        player_id: "07982364-a458-4a1f-b6d6-1be146db9126"
        status: "AVAILABLE"
        verified: true
        __proto__: Object
      1: {player_id: "cab2a609-de2f-4023-a9c7-af89d5292c96", nickname: "D0cC-", status: "BUSY", games: Array(1), country: "NL", …}
      2: {player_id: "d67a944f-1c1d-4d75-a7bf-d52c4b30e7db", nickname: "r1d3Rz", status: "AVAILABLE", games: Array(1), country: "RO", …}
      3: {player_id: "f40bef0d-d40a-48d0-8c53-5a513c35bd3a", nickname: "dotademon", status: "AVAILABLE", games: Array(1), country: "US", …}
      4: {player_id: "dca784fa-546b-43b7-adf6-cf537d858d4f", nickname: "degeneral", status: "AVAILABLE", games: Array(2), country: "UA", …}
      5: {player_id: "e72a43cd-d214-4d4c-989a-efb1d3e7df37", nickname: "daave-", status: "AVAILABLE", games: Array(1), country: "US", …}
      6: {player_id: "4e093c2c-f277-4877-a200-029ae6d8602f", nickname: "ddk", status: "AVAILABLE", games: Array(5), country: "US", …}
      7: {player_id: "ef629874-bf6e-4066-8612-09e0428e923c", nickname: "dieZzz", status: "AVAILABLE", games: Array(3), country: "RU", …}
      8: {player_id: "77995857-d14d-47ed-a150-4f175f70654e", nickname: "durpdurp", status: "AVAILABLE", games: Array(1), country: "US", …}
      9: {player_id: "e3ed56b6-138f-4141-b6c9-ba6eab7bfc24", nickname: "dengue", status: "AVAILABLE", games: Array(3), country: "PT", …}
      10: {player_id: "d6bd0d6f-a068-4e10-b9a4-129297c8691f", nickname: "disco doplan", status: "BUSY", games: Array(2), country: "SE", …}
      11: {player_id: "7e80ed2a-8e39-457e-95c2-1c9ba9449daf", nickname: "dupreeh", status: "BUSY", games: Array(1), country: "DK", …}
      12: {player_id: "32772d2f-fb63-4a84-ac06-4c2e20f49082", nickname: "denis-", status: "AVAILABLE", games: Array(1), country: "DE", …}
      13: {player_id: "089df523-86dd-4705-944f-f012adb5a0f8", nickname: "dream3r---", status: "AVAILABLE", games: Array(1), country: "BG", …}
      14: {player_id: "b8b709e5-96f8-4cf5-8348-95b8b67e0b34", nickname: "DreadAV", status: "AVAILABLE", games: Array(1), country: "RU", …}
      15: {player_id: "5fd703b0-6762-44c8-9284-b8f01ef70e71", nickname: "DendiGoD", status: "AVAILABLE", games: Array(1), country: "UA", …}
      16: {player_id: "6c4f1a76-1341-4513-90ac-8d43dd1c86b6", nickname: "dipparn", status: "AVAILABLE", games: Array(1), country: "SE", …}
      17: {player_id: "ae0bfe74-ec96-4499-910f-e02acd5be700", nickname: "DuBu-", status: "AVAILABLE", games: Array(1), country: "CA", …}
      18: {player_id: "d6bc4849-5256-4463-a38e-bcd77fc31ff9", nickname: "device", status: "BUSY", games: Array(1), country: "DK", …}
      19: {player_id: "4bb4503f-5272-40dc-8165-d050290db66a", nickname: "desi", status: "AVAILABLE", games: Array(1), country: "US", …}
      length: 20
      __proto__: Array(0)
      length: 1
      __proto__: Array(0)
  </code></pre>
  
  <p>Then i pass it to a component like that:</p>
  
  <pre><code>{
      !isLoading &amp;&amp; 
      &lt;PlayerSearchResult players={names} /&gt;
  }    
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>class PlayerSearchItem extends Component {
    public render() {
      return (
        &lt;li key={this.props.cle}&gt;
          &lt;Link to={"#"}&gt;nom - {this.props.pseudo}&lt;/Link&gt;
        &lt;/li&gt;
      );
    }
  }
  
  class PlayerSearchResult extends Component {
    public render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            {Object.keys(this.props.players).map((player, i) =&gt; (
              &lt;PlayerSearchItem
                cle={player[player].player_id}
                pseudo={players[i]}
              /&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>don't mind the way I'm targeting my data, it's one of my many tries.</p>