How dynamically generate menu options for <select> from an array using React.CreateElement()

Question

Here is the code for generating the options manually. Is there anyway to populate the options dynamically from an array or json

    return React.createElement("select", {},
      React.createElement("option", {value: "A"}, "Option A"),
      React.createElement("option", {value: "B"}, "Option B"),
      React.createElement("option", {value: "C"}, "Option C")
    );
  }

CertainPerformance · Accepted Answer · 2021-07-16 03:00:49Z

1

I'd highly recommend compiling JSX, and you can easily use .map where the callback returns a component:

const values = ['A', 'B', 'C'];
// ...
return (
  <select>
    {values.map(val => <option value={val}>{val}</option>)}
  </select>
);

If you can't use JSX (though you really should for anything remotely serious, since it makes syntax much easier), you can spread the result into createElement instead.

return React.createElement("select", {},
  ...values.map(value => React.createElement("option", { value }, value))
);

answered Jul 16, 2021 at 3:00

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

Salman Djingueinabaye Over a year ago

Perfect! Thanks for the insanely fast reply. Worked like a charm

Shahzaib · Accepted Answer · 2021-07-16 05:44:49Z

0

const values = ['A', 'B', 'C'];
// ...
return (
  <select>
    {values.map((val, i) => <option key={i} value={val}>{val}</option>)}
  </select>
);

Don't forget to add key prop as React will complain about it

answered Jul 16, 2021 at 5:44

Shahzaib

2882 silver badges8 bronze badges

Collectives™ on Stack Overflow

How dynamically generate menu options for <select> from an array using React.CreateElement()

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