How to render multiple images from array in React JS? - arrays

Question

everyone. I'm fairly new to React Js, and I got stuck while trying to render images from an array. My code is :
import { home } from "../homeObj";
const Logos = ({ title, img, img2, img3, key }) => {
return (
<>
<div className={styles.anaShif} key={key}>
<h2 className={styles.h2}> {title} </h2>
<div className={styles.logos}>
<img
id={img.id}
src={img}
alt={img.alt}
className={styles.img}
srcSet={`${img2} 2x,
${img3} 3x`}
/>
</div>
</div>
</>
);
};
function Trusted() {
const logoComponent = home.map((_objects, i, id) => {
if (home[i].id === "logos") {
return (
<>
<Logos
key={i}
id={id}
title={home[i].title}
img={home[i].logos[i].src}
/>
</>
);
}
});
return (
<>{logoComponent}</>
);
}
export default Trusted;
and { home } :
export const home = [
{
id: "logos",
title: "Welcome to",
logos: [
{
id: 1,
alt: "car",
src: require("./logo_06.png"),
src2: require("./logo_06#2x.png"),
src3: require("./logo_06#2x.png"),
},
{
id: 2,
alt: "red-car",
src: require("./logo_07.png"),
src2: require("./logo_07#2x.png"),
src3: require("./Tlogo_07#3x.png"),
},
],
]
What happens is that I can only display an image of the 2nd element of logos array, it's like React Js completely skips 1st element(id, img.src, alt).
What I want to do is to be able to display both images at the same time and also add elements dynamically, when a new element gets added to {home}, it should display without hardcoding.
Any help would be greatly appreciated.

Answer 1

You have to return the map of logos which is not happening in your current code. Hence you are getting only one Logos component.
import React from 'react';
import { home } from '../homeObj';
const Logos = ({ title, img, img2, img3, key }) => {
return (
<>
<div className={styles.anaShif} key={key}>
<h2 className={styles.h2}> {title} </h2>
<div className={styles.logos}>
<img
id={img.id}
src={img}
alt={img.alt}
className={styles.img}
srcSet={`${img2} 2x,
${img3} 3x`}
/>
</div>
</div>
</>
);
};
function Trusted() {
const logosIndex = home.findIndex((obj) => obj.id === 'logos');
const logos = home[logosIndex].logos.map(({ id, alt, src }) => {
return <Logos key={id} id={id} title={home[logosIndex].title} img={src} />;
});
return logos;
}
export default Trusted;

Answer 2

You not only need to map over home but also the logos array with-in each home object. Also in your case, you don't need the third arg which is the entire array.
Simplify your code like this:
home.map((_objects, i) => {
if (_objects.id === "logos") {
return (
<>
{
_objects.logos.map(logo => (
<Logos
key={logo.id}
id={logo.id}
title={logo.title}
img={logo.src}
/>
))
}
</>
);
}else {
return null
}
}

Answer 3

Without much if else, you can also write like this.
home.filter((_objects, i) => _objects.id === 'logos')
.map(({logos})=>logos.map(logo=>
<Logos
key={logo.id}
{...logo}
/>))