how to dynamically add SelectOption in React.js

Question

There is a list l:

l = [
 ["a","b"],
 ["c","d"]
]

I want to make a SelectOption field dynamically with this list for which I write:

            <Field
              name="successData.val"
              render={({ field: { name } }) => (
                <Column>
                  <Select
                    onChange={value => setFieldValue(name, value)}
                    placeholder="dummy"
                    width={300}
                  >
                    {l.forEach(key => (
                      <SelectOption
                        value={key[0]}
                        label={key[1]}
                      />
                    ))}
                  </Select>
                </Column>
              )}
            />

But when I click the drop down button, the list doesn't appear, just the upper borderline of the box gets highlighted, it seems the drop down is getting generated, but not correctly.

Can anyone please suggest what might be wrong in this implementation?

keikai · Accepted Answer · 2020-03-28 15:13:29Z

5

Use map()

{l.map(key => (
  <SelectOption
    value={key[0]}
    label={key[1]}
  />
))}

answered Mar 28, 2020 at 15:13

keikai

15.3k10 gold badges56 silver badges73 bronze badges

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

5 Comments

Saurabh Over a year ago

thanks!, it worked, but why was it not working with forEach?

Robin Zigmond Over a year ago

map returns a new array of the return values (which React then renders by rendering each constituent component in order), whereas forEach ignores the return value of the function passed in (using it simply for any "side effects"). So l.forEach(...) in your case, where the function doesn't have any side effects, is no different from undefined. (And of course you shouldn't do anything within render that has side effects.)

Saurabh Over a year ago

just another doubt, after selecting one of the options, its' not showing in the input box, the value still remains as the placeholder value, that would be a problem with onChange function?

Saurabh Over a year ago

setFieldValue is defined as setFieldValue: PropTypes.func.isRequired in props

keikai Over a year ago

@Saurabh Guessing you could make it a new post, with specific description which may help others to find your problem quickly

Collectives™ on Stack Overflow

how to dynamically add SelectOption in React.js

1 Answer 1

Use map()

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use map()

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related