React - Calculating the bigger value between elements only working partially

Question

I am comparing two different Teams to define which is the stronger. The comparison is made by calculating the average of the two team score, the team with the greater value is the stronger.

I have reproduced my case here: DEMO

These are the functions used

const getAverage = (league, team) => {
  if (isNaN(league[0][team])) return null;

  return league.map(x => x[team]).reduce((a, c) => a + c) / league.length;
};

const maxAverage = (league, teams) => {
  return teams
    .map(team => {
      return {
        team: team,
        avg: getAverage(league, team)
      };
    })
    .reduce((a, b) => (a.avg > b.avg ? a : b)).team;
};


<p>Stronger Team:{maxAverage(this.state.selectedLeague, [this.state.selectedHomeTeam,this.state.selectedAwayTeam])}</p>

As you can see in the demo, it only works partially.

For example if i compare and select Atletico against Barcelona, it defines Barcelona stronger which is wrong ( -2 is not bigger than 0 ) but in the other way around selecting Barcelona against Atletico it defines Atletico stronger which is correct ( 0 is bigger than -2 ).

Where is my problem and how can i fix it?

I always try to make it simple and well detailed to get an answer, my way to learn. Thanks — Koala7, Oct 28 '19 at 17:02

wentjun · Accepted Answer · 2019-10-28T16:35:32.533

On your maxAverage function, you should be referencing the exact league you would want to select on your scores object.

Previously, you were trying to pass the entire scores object, which consists of both the Liga and Premier arrays. Which is why it will return null when you try to run that method.

Instead, you should be passing the selected league to the getAverage method, which accepts league as an array (not an object of arrays).

This should be the required changes to your maxAverage function.

const maxAverage = (league, teams) => {
  return teams
    .map(team => {
      return {
        team: team,
        avg: getAverage(scores[league], team)
      };
    })
    .reduce((a, b) => (a.avg > b.avg ? a : b)).team;
};

I have created a demo over here.

score 1 · Answer 2 · answered Oct 28 '19 at 16:31

You missed a step on maxAverage:

 <p>
    Stronger Team:
      {maxAverage(scores[this.state.selectedLeague], [
        this.state.selectedHomeTeam,
        this.state.selectedAwayTeam
       ])}
  </p>

it uses getAverage but that requires the scores, not just the name of the team. Tried with code above and it seems to work.

Try breaking down the code and debugging. I ended up moving a couple of recuder functions into their own function (just for debugging), then adding a "debugger;" so I could find the running js on that page.

Bet you're kicking yourself for missing it :P

React - Calculating the bigger value between elements only working partially

2 Answers2