mapping an array not returning value

Question

I have an array I'm trying to map values from, but it isn't returning what I need to continue with my project.

The codeblock in question is:

<select
    className={"clubsList"}
    defaultValue={"allClubs"}
    onChange={this.handleClubChange}>
    <option key={"allClubs"} value={"allClubs"}>All Clubs</option>
    {LEAGUE_IDS_NAMES.forEach(league => {
        if (league.id == this.props.fantasyLeagueId) {
            league.clubs.map(club => {
                console.log('club:', club.name);
                return <option key={club.name} value={club.name}>{club.name}</option>;
            });
        }
    })}
</select>

What this is intended to do is display a list of club names. LEAGUE_IDS_NAMES is an imported file that is an array of objects. These objects are soccer leagues, and one of the keys of each league is clubs, which in turn is an array of objects like this:

clubs: [
    {name: 'Club Name1'},
    {name: 'Club Name2'},
    ...
]

I'm using React/Redux to keep a league id in state and then am using that to compare against each league object in the array, checking the id of each. If it matches, it is supposed to give me the return statement. I know that I am accessing the club names properly as the console.log is correctly giving me club names for the league id in state. What it's not doing is giving me the <option> part of it all.

To experiment, I threw a return in front of the league.clubs.name line, but still nothing. The only thing I ever see for this <select> is the "All Clubs" <option>.

Any ideas?

James · Accepted Answer · 2018-01-24 10:28:38Z

2

The issue is you can’t yield anything from forEach.

Given its only clubs from a specific league you can filter the league and then map the clubs e.g.

const league = LEAGUE_IDS_NAMES.find(l => l.id === this.props.fantasyLeagueId);
return league && league.clubs.map(l => <option key={c.name} value={c.name}>{c.name}</option>)

Since you're following the Redux pattern, you can move the the filtering into a selector.

edited Jan 24, 2018 at 10:28

answered Jan 20, 2018 at 21:42

James

82.4k19 gold badges173 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin Over a year ago

decent answer but I think your find should be a filter

James Over a year ago

@Kevin nah was deliberately find as it’s a specific league and not a list of leagues, just misuse of of map after, updated though.

jstrother Over a year ago

This was it! Thanks! I wracked my brain for a little over a day on this one.

Collectives™ on Stack Overflow

mapping an array not returning value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related