React: mapping through a list of svg images-CodePudding

I am trying to map through a list of svg images and show enough description corresponding to the svg image.

index.js

import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";


const data = [
  {
    id: `1`,
    title: "Coming soon",
    description:'',
    img: Pic1,
  },
  {
    id: `2`,
    title: "Coming soon",
    description:'',
    img: Pic2,
  },
  {
    id: `3`,
    tile: "Coming soon",
    description:'',
    img: Pic3,
  },
]

function Test() {
  return (
{data.map(({ id, title,description, img }) => (
                  <div key={id} className="guest--item swiper-slide">
                    <div>
                    <img key={id} src={img} alt='mySvgImage' />
                      <h1>{title}</h1>
                      <h2>{description}</h2>
                      </div>
                  </div>
                ))}
)}

currently when i check my react website i can only see mySvgImage which is the alt 3 times and cant see the actual image

CodePudding user response：

You are importing SVG's as React Component hence you should use them as Component itself.

In you code you are passing a React Component (SVG's which you imported as React Component) as a src attribute to an <img> tag which is invalid.

import React from "react";
import ReactDOM from "react-dom";

import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";

const data = [
  {
    id: `1`,
    title: "Coming soon",
    description: "",
    Image: Pic1
  },
  {
    id: `2`,
    title: "Coming soon",
    description: "",
    Image: Pic2
  },
  {
    id: `3`,
    tile: "Coming soon",
    description: "",
    Image: Pic3
  }
];

function Test() {
  return (
    <>
      {data.map(({ id, title, description, Image }) => (
        <div key={id}>
          <div>
            <Image />  {/* Use Image as Component */}
            <h1>{title}</h1>
            <h2>{description}</h2>
          </div>
        </div>
      ))}
    </>
  );
}

CodePudding user response：

Because you are importing your images the wrong way. I have made this working CodeSandbox which is exactly the same as your example. Check how I imported images and it's working just fine. CodeSandbox