Return statement in my function is ignored

Question

I have created function that was to return JSX object, but when I call it in render method it doesn't display anything.

import React, { Component } from 'react'
import './styles/Mainbody.css'

import axios from 'axios';
import { FORTNITE_IO } from '../config'

class Mainbody extends Component {
    
    getTopPlayersInfo = (player) => {
        axios.get(`https://fortniteapi.io/lookup?username=${player}`, {
          headers: {
              Authorization: FORTNITE_IO
          }
      })
      .then(res => {
          const user_id = res.data.account_id
          axios.get(`https://fortniteapi.io/stats?account=${user_id}`, {
          headers: {
              Authorization: FORTNITE_IO
          }
        })
        .then(res => {
            const kills = res.data.global_stats.duo.kills + res.data.global_stats.solo.kills + res.data.global_stats.squad.kills
            const solo = res.data.global_stats.solo.placetop1
            const duo = res.data.global_stats.duo.placetop1
            const squad = res.data.global_stats.squad.placetop1
            return (
                <React.Fragment>
                    <p className="stats">Kills: {kills}</p>
                    <p className="stats">Solo Wins: {solo}</p>
                    <p className="stats">duos Wins: {duo}</p>
                    <p className="stats">Squad Wins: {squad}</p>
                </React.Fragment>
                )
        })
        .catch(err => err)
      })
      .catch(err => err)
    }
render() {
        return (
            <React.Fragment>
            {this.getTopPlayersInfo('jerugba')}
            </React.Frangment>
export default Mainbody;

Does this answer your question? [How to return values from async functions using async-await from function?](https://stackoverflow.com/questions/49938266/how-to-return-values-from-async-functions-using-async-await-from-function) — matvs, Jun 13 '20 at 15:18
You cannot return something from asynchronous call and use it synchronously. Unless you use Js async/await syntax, but then it probably won't work with react's render method, since it is not async one. Proper way to re-render component in react is by simply updating state (either by calling setState, using hooks or dispatching redux action) — matvs, Jun 13 '20 at 15:22

score 1 · Answer 1 · answered Jun 13 '20 at 15:13

1

Don't worry, patch this is very simple ^^

First create a constructor props with super props. Inside create a state by this.state : {}.

When you fetch your informations, send these information on the state by setState();

Now, on your final render(), you can select what you want to render on a div by this.state.kills (For example)

Have fun ^^

answered Jun 13 '20 at 15:13

RaeperFR

27
3

thanks, i thought of this but... i am going to use the function for 3 players and i dont want to write the the function three times for each player.. how can i call it 3 times – Damiisdandy Jun 13 '20 at 15:19
But you dont need to do this haha, Go to stock all informations on your state, and when people on your website check the kills, solo, duo etc... by fetching api, they need to input the nickname. Stock the nickname on the state and when you fetch API, Fetch this with this.state.nickname :) – RaeperFR Jun 13 '20 at 15:21

Nagesh Sanika · Answer 2 · 2020-06-13T15:34:42.817

initialise state and when component mounts update state with latest global_stats and it will render with latest values , modified your code as follows

import React, { Component } from 'react'
import './styles/Mainbody.css'

import axios from 'axios';
import { FORTNITE_IO } from '../config'

class Mainbody extends Component {
  constructor(props) {
    super(props);

    this.state = {
      kills: 0,
      solo: 0,
      duo: 0,
      squad: 0,
    };
  }

  componentDidMount() {
    this.getTopPlayersInfo('jerugba');
  }

  getTopPlayersInfo = (player) => {
    axios.get(`https://fortniteapi.io/lookup?username=${player}`, {
      headers: {
        Authorization: FORTNITE_IO
      }
    })
      .then(res => {
        const user_id = res.data.account_id
        axios.get(`https://fortniteapi.io/stats?account=${user_id}`, {
          headers: {
            Authorization: FORTNITE_IO
          }
        })
          .then(res => {
            const kills = res.data.global_stats.duo.kills + res.data.global_stats.solo.kills + res.data.global_stats.squad.kills;
            const solo = res.data.global_stats.solo.placetop1;
            const duo = res.data.global_stats.duo.placetop1;
            const squad = res.data.global_stats.squad.placetop1;

            // set state here

            this.setState({
              kills,
              solo,
              duo,
              squad,
            });
          })
          .catch(err => err)
      })
      .catch(err => err)
  }

  render() {
    const { kills, solo, duo, squad } = this.state;

    return (
      <React.Fragment><p className="stats">Kills: {kills}</p>
        <p className="stats">Solo Wins: {solo}</p>
        <p className="stats">duos Wins: {duo}</p>
        <p className="stats">Squad Wins: {squad}</p>
      <React.Fragment>
    );
  }
}

export default Mainbody;

also try async await if you want something like this

getTopPlayersInfo = async(player) => {
    try {
      const headers = {
        Authorization: FORTNITE_IO
      };

      const userData = await axios.get(`https://fortniteapi.io/lookup?username=${player}`, { headers });
      const { account_id } = userData;
      const stats = await axios.get(`https://fortniteapi.io/stats?account=${account_id}`, { headers });
      // and process stats and set you state here
    } catch (e) {
      // handle your errors
    }
}

You can also use react hooks (useEffect & useState)

thanks, i thought of this but... i am going to use the function for 3 players and i dont want to write the the function three times for each player.. how can i call it 3 times.. — Damiisdandy, Jun 13 '20 at 15:33
in you parent component pass player name as prop to `Mainbody` and change your code something like this Parent => `{players.map(player => ())}` and in Mainbody change `componentDidMount() { const {player} = this.props; this.getTopPlayersInfo(player'); } and add key to Fragment in render function ` — Nagesh Sanika, Jun 13 '20 at 15:51

Return statement in my function is ignored

2 Answers2