How to use an array as option for react select component
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>;
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>