How to render multiple images from array in 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("./[email protected]"),
                src3: require("./[email protected]"),
            },
            {
                id: 2,
                alt: "red-car",
                src: require("./logo_07.png"),
                src2: require("./[email protected]"),
                src3: require("./[email protected]"),
            },
        ],
]

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.

You are iterating on home, Instead you should iterate on logos. Filter home based on type==='logos' and then iterate on logos array. — gautamits
– gautamits, Commented Apr 27, 2020 at 4:37

chandan_kr_jha · Accepted Answer · 2020-04-27 04:44:56Z

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;

Guru Hadadi · Accepted Answer · 2020-04-27 04:39:01Z

0

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

answered Apr 27, 2020 at 4:39

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Comments

gautamits · Accepted Answer · 2020-04-27 05:14:16Z

0

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

answered Apr 27, 2020 at 5:14

gautamits

1,2929 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to render multiple images from array in React JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related