Jack Jack - 3 months ago 8
React JSX Question

React JSX <option> tag population

I am trying to populate an options tag with string values from an array with the following function:

render: function(){
var array = ['yes','no'];
var opts = array.map(function(name){return <option>name</option>});
return(
<div>
<select>{opts}</select>
</div>
);
}


The problem is that I receive

<option>name</option>
<option>name</option>


But I need

<option>yes</option>
<option>no</option>


Any ideas how to do that?

Answer

Wrap name into {}

var App = React.createClass({
  render: function(){
    var array = ['yes','no'];
    var opts  = array.map(function(name){
      return <option>{ name }</option>
    });
    
    return <div>
      <select>{opts}</select>
    </div>
  }
});

ReactDOM.render(<App />, document.getElementById('container'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Comments