Select with React.JS - dynamically populated options

Question

I am trying to populate select in [stateless component of] React/Redux app as:

const FillSelect = ({team}) => <option value={team.onboardingOrder}>{team.name}</option>

const TeamSelector = ({teams}) => {
  return (
    <select>
      <option value="">All</option>
      {
        teams ? (teams => teams.map(team => <FillSelect team={team} />)) : null
      }
    </select>
  )
}

Teams looks like:{0:{id: 1, name: "Program Management", onboardingOrder: 0, …}, 1: {id: 2, name: "Value Capture", onboardingOrder: 1, …}…}.

It returns an error: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in select ...

Is this happening because I am using map()? What is the correct way of doing this?

Also, you can't map an object. Use Object.values(teams).map... — Diogo Sgrillo
– Diogo Sgrillo, Commented Jan 30, 2018 at 13:36
One cannot map ANY object, but iterables are supported, right? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Moshe Shmukler
– Moshe Shmukler, Commented Jan 30, 2018 at 13:44

rdiz · Accepted Answer · 2018-01-30 13:33:10Z

3

You're not calling map directly; if teams is truthy, you return a function (teams => ...). You probably wanted the line to look like this:

teams ? teams.map(team => <FillSelect team={team} />) : null

Which would yield an array of <FillSelect />'s.

answered Jan 30, 2018 at 13:33

rdiz

6,1961 gold badge31 silver badges41 bronze badges

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

1 Comment

Moshe Shmukler Over a year ago

Did not make any difference.

Moshe Shmukler · Accepted Answer · 2018-01-30 15:03:42Z

0

This works fine:

  return (
    <select>
      <option value="">All</option>
      {
        Object.values(teams).map((team, i) => <option value={team.onboardingOrder} key={i}>{team.name}</option> )
      }
    </select>
  )

answered Jan 30, 2018 at 15:03

Moshe Shmukler

1,3203 gold badges21 silver badges45 bronze badges

Collectives™ on Stack Overflow

Select with React.JS - dynamically populated options

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related