Display array of images in react? - mysql

Question

I am new to react and I want to display array of images in react webpage. The array has statis number of images.
render: function() {
console.log("edit");
return (
<div>
<Button bsStyle="info" id="qslist" onClick={this.show}>View</Button>
<Button bsStyle="info" id="qslist" className="delete" onClick={this.handleDelete}>Delete</Button>
<Button bsStyle="info" id="qslist" className="disable" onClick={this.handleDisable}>Disable</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<div id="formdata1">Name:<b>{name}</b></div>
<div id="formdata1">User:<b>{user}</b></div>
<div id="formdata1">Radius:<b>{radius}</b></div>
<div id="formdata1">Status:<b>{status}</b></div>
<div id="formdata1">Type:<b>{type}</b></div>
<div id="formdata1">Latitude:<b>{lat}</b></div>
<div id="formdata1">Longitude:<b>{long}</b></div>
<div id="formdata1">Description:<b>{caption}</b></div>
<div id="formdata1">Schedule:<b>{schedule}</b></div>
<div id="formdata1">Duration:<b>{duration}</b></div>
<div id="formdata1">lshare:<b>{lshare}</b></div>
<div id="formdata1">Id:<b>{listingid}</b></div>
<Image src={imgs} rounded />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close} bsStyle="info" id="solbutton">Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
in the above code in image i am trying to display array of images. Currently it is possible to display only one image <Image src={image} rounded/>. How to display many number of images. The array images are in
[
'http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg',
'http://wallpaper-gallery.net/images/image/image-13.jpg',
...
]

Answer 1

If you just want to display an array of images (for whatever reason), you can do the following:
In the beginning of the render method (next to the console log) add this:
var images = imgs.map(function(image) {
return (<Image src={image} rounded />);
});
This will map your paths array into an array of Image components (where imgs is an array of paths like you specified).
Then, replace
<Image src={imgs} rounded/>
With
{images}
And that's it.
In case you want some kind of carousel, there are a number of packages available (example), where you can just define something like:
<ImageGallery items={imgs} />