Dynamically change Image -> React component

Question

I have an array data which is passed to a reusable component.

const data = [
  {
    title: "A",
    source: "facebook",
  },
  {
    title: "B",
    source: "youtube",
  },
  {
    title: "C",
    source: "twitter",
  },
];

This is how my re-useable component looks like :

import facebook from "../../images/facebook.png";
import youtube from "../../images/youtube.png";
import twitter from "../../images/twitter.png";

function NumberBox({ data }) {
  return (
    <>
      {data.map((item) => (
        <>
          <div className="title">{item.title}</div>
          <img src={item.source} className="image" />
        </>
      ))}
    </>
  );
}

I want to dynamically change the img element based on the data from props...like facebook icon, Twitter icon etc. With the code I have written here, i get blank image icon against {item.source} all the time but if i replace {item.source} with {facebook} it works properly. Can someone tell me what I'm doing wrong here?

Thanks.

source: twitter Source must be a reference to a variable( you imported img source), not a string — Andrew F
– Andrew F, Commented Oct 26, 2021 at 8:37

mousetail · Accepted Answer · 2021-10-26 08:38:20Z

1

The string "facebook" is not the same as the image facebook, which will be resolved by webpack to be the full url to the image. You can do it in two ways, one using a map:

image_map = {
    facebook: facebook,
    ...
}

<img src={image_map[data.source}]>

Other way is to place the url in data:

import facebook from '../images/facebook.png'

data = [
   title: 'facebook', 
   image: facebook // Notice: no quotes
]

answered Oct 26, 2021 at 8:38

mousetail

8,1696 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew F · Accepted Answer · 2021-10-26 08:39:29Z

1

source: twitter Source must be a reference to a variable( you imported img source), not a string

const data = [
    {
       title: 'A'
       source: facebook // facebook but not 'facebook'
    },

    {
       title: 'B'
        source: youtube
    },

    {
      title: 'C'        
      source: twitter
    }
];

answered Oct 26, 2021 at 8:39

Andrew F

5543 silver badges8 bronze badges

Comments

Tonio · Accepted Answer · 2021-10-26 08:48:15Z

1

In your code item.source is a string (like 'facebook'), and has no relation with the image imported import facebook from '../../images/facebook.png';

The easy and clean way is setting the image in data, by importing:

import facebook from '../../images/facebook.png';

const data = [
    {
       title: 'A',
       source: 'facebook',
       image: facebook,

    },

... or usign a public url:


const data = [
    {
       title: 'A',
       source: 'facebook',
       image: 'https://domain/public-url-to-image.jpg',

    },

and later:

<img src={data.image} />

edited Oct 26, 2021 at 8:48

answered Oct 26, 2021 at 8:43

Tonio

1,8121 gold badge7 silver badges13 bronze badges

Comments

Zeeshan Ahmad · Accepted Answer · 2021-10-26 08:38:46Z

0

item.source is a string not a source path to a file. To resolve this issue you can check which item.source is and use the source from the import statement like following:

function NumberBox({ data }) {
  return (
    <>
      {data.map((item) => (
        <>
          <div className="title">{item.title}</div>
          {item.source === 'facebook' && <img src={facebook} className="image" />}
          {item.source === 'twitter' && <img src={twitter} className="image" />}
          {item.source === 'youtube' && <img src={youtube} className="image" />}
        </>
      ))}
    </>
  );
}

answered Oct 26, 2021 at 8:38

Zeeshan Ahmad

5,7353 gold badges29 silver badges36 bronze badges

1 Comment

mousetail Over a year ago

This would be a mess to maintain if there where more images

Shnigi · Accepted Answer · 2021-10-26 08:49:14Z

0

You are referencing a string which happens to be "facebook", "youtube" or "twitter" it is not an image file. If you use the imported image which name is "twitter" then it will show the image. You have to update your data array to reference the image variable. Remove the quote marks and it should work. Example how to use with links. Your data should be

const data = [
  {
    title: "A",
    source: facebook,
  },
  {
    title: "B",
    source: youtube,
  },
  {
    title: "C",
    source: twitter,
  },
];

https://codepen.io/shnigi/pen/MWvpMeE

answered Oct 26, 2021 at 8:49

Shnigi

1,01010 silver badges19 bronze badges

Collectives™ on Stack Overflow

Dynamically change Image -> React component

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related