CODEWITHSUNDEEP
mysqlimagereactjs
Daniel
Daniel

Reputation: 53

Display array of images in react?

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',
    ...
]

Upvotes: 1

Views: 7836

Answers (1)

paqash
paqash

Reputation: 2314

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} />

Upvotes: 2

Related Questions