how to write react component to construct HTML DOM
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
Related Questions
Ad
- → Make a Laravel collection into angular array (octobercms)
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → Angularjs not working inside laravel form
- → Analysis of Flux implementations
- → how to write react component to construct HTML DOM
- → angular ng-repeat and images in a row
- → Conditional BG Color on AngularJS
- → Should I 'use strict' for every single javascript function I write?
- → getting the correct record in Angular with a json feed and passed data
- → "Undefined is not a function" at .toBe fucntion
- → angularjs data binding issue
- → Angular / JavaScript auto hydrate an instance
- → Convert generic text string in json object into valid url using Angular
Ad