Display array of images in react?

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

do you want to make gallery kind on thing, showing images one bye one ?? — Mayank Shukla
– Mayank Shukla, Commented Feb 23, 2017 at 8:10
yeah, once clicking a view button, all the images from database are displayed in a pop-up model window. — Daniel
– Daniel, Commented Feb 23, 2017 at 8:11
@Saran: Give some more details about your problem, not in comments but rather in the question. It will increase your chances to get good answer(s). — groenhen
– groenhen, Commented Feb 23, 2017 at 8:42
use react-lightbox easy to use and provide a proper view: github.com/fritz-c/react-image-lightbox — Mayank Shukla
– Mayank Shukla, Commented Feb 23, 2017 at 8:55

paqash · Accepted Answer · 2017-02-23 09:24:00Z

2

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

answered Feb 23, 2017 at 9:24

paqash

2,3141 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display array of images in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related