reactjs - 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>;