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

Question

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 1

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

class Stopka extends Component {
    render() {

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

        const images = array.map(image => {
           return <img key={image} src={require(`./icons/${image}.png`)} 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;

Answer 2

For others who had the same problem as me. This is working example as well. In my opinion with key index is better, cuz it not produce errors in console. Great for bigger projects.

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

class Stopka extends Component {
    render() {
        let names = ['wood', 'sun', 'moon', 'sea'].map( (name, index) => {
            return <img key={index} className="img-responsive" alt="" src={require(`./icons/${name}.png`)} />
        } );
        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;

Thanks to Paul Fitzgerald for the guide.