How to use an array as option for react select component

Question

If i wanna replace the options

Apple
Banana

in given exam

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

var 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>