如何在 React JS 中从数组中渲染多个图像？

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} />))