Brunhilda Brunhilda - 1 year ago 163
React JSX Question

How to render images with React JS using map or loop?

This is my js file, which contains my images.



import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
render() {
return (
<div className="container">
<footer className="row">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h4>Some text</h4>
</div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<img src={require("./icons/name1.png")} alt="" className="img-responsive" />
<img src={require("./icons/name2.png")} alt="" className="img-responsive" />
<img src={require("./icons/name3.png")} alt="" className="img-responsive" />
<img src={require("./icons/name4.png")} alt="" className="img-responsive" />
</div>
</footer>
</div>
);
}
}
export default Stopka;





And file which render this.


import React from 'react';
import ReactDOM from 'react-dom';
import Stopka from './Stopka';
import registerServiceWorker from './registerServiceWorker';



ReactDOM.render(<Stopka />, document.getElementById('stopka'));
registerServiceWorker();





For now my images is not rendering in much optimize mode, cuz if i want to add 20 or even more it'll be so much pain. I want to render it with loop or map function. Tried some but it doesn't work. Can you explain how can I do it?

This is what i tried.


import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
render() {
let names = ['name1', 'name2', 'name3'];
for (let i = 0; i < this.props.level; i++) {
names.push(<image src={require("./icons/"+names+".png")} alt="" className="img-responsive" key={i} /> );
}
return (
<div className="container">
<footer className="row">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h4>Some text</h4>
</div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
{names}
</div>
</footer>
</div>
);
}
}


export default Stopka;





Another try



import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
render() {
let names = ['wood', 'sun'];

let images = names.map(name => {

<img
src = {require("./icons/{name}.png")}
alt = ""
className="img-responsive" />
});
return (
<div className="container">
<footer className="row">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h4>some text</h4>
</div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
{ images }

</div>
</footer>
</div>
);
}
}


export default Stopka;





But this get error "Module not found: Can't resolve './icons/{name}.png' "

Answer Source

You can use the js map function combined with ES 6 template literals.

class Stopka extends Component {
    render() {

        let array = ["wood", "lake", "sun", "moon", "sea"];

        let images = array.map(image => {
           return <img src={require(`./icons/${image}.png`)} alt="" className="img-responsive" />
        });

        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>Some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                       { images }
                    </div>
                </footer>
            </div>
        );
    }
}
export default Stopka;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download