How to use an array as option for react select component

Question

If I wanna replace the options

<option value="A">Apple</option> <option value="B">Banana</option> 

in the given example by the use of an array in a react jsx file, how would I proceed?

<select value="B">     <option value="A">Apple</option>     <option value="B">Banana</option> </select> 

Answer 1

Because it's just javascript, there are a million ways. The way I usually take is to map the container to generate the guts. A for loop or whatever would also work just fine.

const Answer = react.createClass({      render: function() {          var Data     = ['this', 'example', 'isnt', 'funny'],             MakeItem = function(X) {                 return <option>{X}</option>;             };           return <select>{Data.map(MakeItem)}</select>;      }  }; 

Or in es6 in more modern react you can just

const Answer = props =>    <select>{     props.data.map( (x,y) =>        <option key={y}>{x}</option> )   }</select>; 

Answer 2

You're usually required to supply a unique key to make sure React can identify items, you can use uuid to do this or a key you have on hand, e.g.

  <Select name={field}>     {FBButtons.map(fbb =>       <option key={fbb.key} value={fbb.key}>{fbb.value}</option>     )};   </Select>