javascript - Repeat list using react -
i have following list image number , folder number want repeat 27 time - want change image number , have ability set folder number.
<ul> <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0001.png" /></li> <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0002.png" /></li> <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0003.png" /></li> </ul>
i have following code i'm playing with:
var repeatmodule = react.createclass({ getdefaultprops: function() { return { items: [] } }, render: function() { var listitems = this.props.items.map(function(item) { return ( <li key="{item}"> <input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/000' + {item} + '.png" /> </li> ); }); return ( <ul> {listitems} </ul> ); } });
here cam with.. repeats 27 times , allows folder passed in prop wish.
var repeatmodule = react.createclass({ getdefaultprops: function() { return { folder: 'folder1' } }, render: function() { // build 27 items here in array // can pass in 27 items props loop great way 27 things. var items = []; (var = 1; <= 27; i++) { items.push({ image: 'assets/images/personal_images/' + this.props.folder + '/000' + + '.png' }) } return ( <ul> { // map on array here , display list items (items).map(function(item, key) { return ( <li key={key}> <input type="radio" checked="checked" /> <img src={item.image} /> </li> ) }) } </ul> ); } });
you can see working (with broken images) here: https://jsbin.com/koripebake/edit?html,js,output
Comments
Post a Comment