React: mapping through a list of svg images

March 6, 2022

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

>Solution :

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