Rendering Array of Images in React [duplicate] - arrays

Question

This question already has answers here:
Loop inside React JSX
(84 answers)
Closed 2 years ago.
I need help. I have been searching similar posts, but none of them solved my problem (imagesPool.js)
import React from 'react';
const imagesPool = [
{ src: './images/starbucks.png'},
{ src: './images/apple.png'},
{ src: './images/mac.png'}
];
export default imagesPool;
Rendering the images (App.js) :
import React from "react";
import imagesPool from './imagesPool';
const App = () => {
return (
<div>
<img src={imagesPool} />
</div>
)};
export default App;
Result : No images being displayed

Answer 1

You should loop through your images because src expects a string location to the image.
import imagesPool from './imagesPool';
const App = () => {
return (
<div>
{imagesPool.map((imgSrc, index) => (<img src={imgSrc.src} key={index} alt="Make sure to include a alt tag, because react might throw an error at build"/>))}
</div>
)};

Answer 2

In react you solve things like conditionals, iterating, etc. with javascript (Remember, <img> is also just javascript and gets parsed into React.createElement("img")).
Since img expects a string in the src-property, we need to iterate over the array of sources and produce an img-Element for every source:
<div>
{
imagesPool.map(({ src }) => (<img key={src} src={src} />))
}
</div>
With key you tell react how to recognize that an element is the same with subsequent renderings.

Answer 3

You always need to import React from 'react' if you are rendering jsx/tsx. In your code, you are returning jsx, thus you need to import react.
import React from 'react';
import imagesPool from './imagesPool';
const App = () => {
return (
<div>
{imagesPool.map((image) => <img key={image.src} src={image.src} />)}
</div>
)};
export default App;