Dynamically change Image -> React component - reactjs

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.

Answer 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
]

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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