React Axios - JSON Get response isn't displaying from render() - Riot API

Question

I starting learning React a couple days ago and Axios today. I've spent the last 4+ hours watching/reading tutorials and I just can't figure this out.

I'm trying to create a simple stats website for League of Legends using Riot's API. Below you can see my constructor, componentDidMount, and render functions. I feel like I'm doing 1 of 3 wrong or most likely all 3. I'm calling this Get, which returns the JSON below. I want to access the "name" and "accountId".

{
  "profileIconId": 3270,
  "name": "Doublelift",
  "puuid": "SrvIz_3Xa05InF_hTjwq1v8iB6lqNXz0SEc_5vhOFYlScrZOg8pSM9Si_UdPGAD9UYGhaRWHBeBGrw",
  "summonerLevel": 155,
  "accountId": "iNc_SUPKq-ckcANeC36Yn18Y0XSofK3ShBQg_h5wivC0Bg",
  "id": "DjnxZhsTjgNhv3sMZMMJjlCUqAskiMfP6bP7GIcWovbwR1k",
  "revisionDate": 1580499454000
}

I should note that I made my API key default. It's stored in my index.js file. Is this secure?

axios.defaults.headers.common['Authentication'] = 'API-Key-randomlettersandnumbers';

Here's my code. In render() when I type summonerDetail.[field] it recognizes the fields that are there shown in the JSON response above. Maybe my render is wrong causing it not to display? And yes I know "accountID" isn't in my render. I figured I'd start small with just "name". I will eventually need to use "accountID" for a different Get.

    import React from 'react';
    import axios from 'axios';

    export default class GetBySummonerName extends React.Component {

      constructor(props){
        super(props);
        this.state = {
          summonerDetails: []
        };
      }

      // https request to perform Get
      componentDidMount() {
        axios.get('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/doublelift')
          .then(res => {
            console.log(res);
            this.setState({ summonerDetails: res.data});
          })
      }

      render() {
        return (
            <div>
              { this.state.summonerDetails.map(summonerDetail => <h1>{summonerDetail.name}</h1>)}
            </div>
        )
      }
    }

To display the "name" on the website I import the above class into App.js. Only problem is it's not working. I have the console.log(res); in my ComponentDidMount(), but I don't know how to view the console in Atom. I don't need any headers in my componentDidMount() because the "summonerName" is in the Get URL. The rest of the headers are auto-generated on Riot's side. Please help :)

score 2 · Answer 1 · answered Feb 04 '20 at 08:01

2

You don't need to map. If you are receiving the object like the following in res.data

{
    "profileIconId": 3270,
    "name": "Doublelift",
    "puuid": "SrvIz_3Xa05InF_hTjwq1v8iB6lqNXz0SEc_5vhOFYlScrZOg8pSM9Si_UdPGAD9UYGhaRWHBeBGrw",
    "summonerLevel": 155,
    "accountId": "iNc_SUPKq-ckcANeC36Yn18Y0XSofK3ShBQg_h5wivC0Bg",
    "id": "DjnxZhsTjgNhv3sMZMMJjlCUqAskiMfP6bP7GIcWovbwR1k",
    "revisionDate": 1580499454000
}

Then replace this in you return statement.

<div>{ this.state.summonerDetails.name }</div>

Hope this works for you.

answered Feb 04 '20 at 08:01

Muhammad Zeeshan

4,608
4
15
41

Thanks for the answer. I didn't think I needed map. I think I did try removing it and it still wasn't displaying. I'll give it another shot tomorrow night and reply back – Garret Feb 04 '20 at 08:27
Also default state should be empty object. `this.state = { summonerDetails: {} };` – ma_dev_15 Feb 04 '20 at 08:40
Thank you. Both of your tips work. My Get response is getting an error now. I posted it in another comment below. – Garret Feb 05 '20 at 03:42

score 0 · Answer 2 · answered Feb 04 '20 at 08:13

0

You can check the response of your API in your network tab or you can console.log your state variable this.state.summonerDetails inside render method. If the response you are receiving is object, then you don't need to map over it. If it is an array then you have to iterate over it using map and extract the name property.

answered Feb 04 '20 at 08:13

Manav jethani

32
8

Wow this is really helpful! Thank you! I see this error and am trying to solve it. Access to XMLHttpRequest at 'https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/doublelift' from origin 'http://192.168.1.132:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Garret Feb 05 '20 at 03:40
Its a CORS issue, please refer to this article to resolve it. https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9. Or you can download CORS plugin for your chrome browser. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en – Manav jethani Feb 05 '20 at 06:46

React Axios - JSON Get response isn't displaying from render() - Riot API

2 Answers2