Why Images not loading, when trying to load from an array in react

Question

I have following code where i am trying to load images from Array, if i try to load a single image it works fine, but if i try to load multiple images it dosent show any image, tho my div test is in the dom.

import React, {Component} from 'react';

class Slider extends Component {

    render() {
        const myItems = [{source_image: '1.jpg'}, {source_image: '2.jpg'}, {source_image: '3.jpg'}];
        return (



                <div id="test">
                    {myItems.map(function (a) {

                            <img src={"images/"+a.source_image}/>
                        }
                    )}
                </div>

        );
    }
}

export default Slider;

Andrii Starusiev · Accepted Answer · 2017-08-30 21:29:13Z

1

You forget return in map:

{myItems.map(function (a) {
        return <img src={"images/"+a.source_image}/> // here
    })
}

{myItems.map(a => <img src={"images/"+a.source_image}/>)} //this is more clear, I think

answered Aug 30, 2017 at 21:29

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

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

2 Comments

noobie-php Over a year ago

thanks, i cant describe the stupidity feel that i got here.

Andrii Starusiev Over a year ago

Be more attentive :)

Collectives™ on Stack Overflow

Why Images not loading, when trying to load from an array in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related