how to write react component to construct HTML DOM

- 1 answer

Ad

I'm started learning reactjs. I like to write react component that will read inputs from config file and generate a HTML DOM at run time.

config.json

{
  "select": {name: "cars", option: ["volvo", "audi"], style: "select2" }
}

The react component should return the following output

   <select name="cars" style="select2">
     <option value="volvo">Volvo</option>
     <option value="audi">Audi</option>
   </select>

Any suggestions Thanks in advance

Ad

Answer

Ad

This should work for you:

var config = require('./pathtoconfig');

var ComponentName = React.createClass({
    render() {

     var ops = config.select.option.map(function(o) {
        return <option value={o}>{o}</option>
     });

     var htmlEls = <div>
        <select name={config.select.name}>
            {ops}
        </select>
     </div>

     return (
        <div>{htmlEls}</div>
     );
    }
})
Ad
source: stackoverflow.com
Ad