Search code examples
reactjsinterpolationsrc

How to interpolate in React

I have an attribute src in img src="images/education.jpg". Images are written in the object.

const itemData = [
  {
    img: "image",
    title: "Education",
    src: "education.jpg",
  },
  {
img: "image2",
    title: "Cooking",
    src: "cooking.jpg",
},
];

How to interpolate this string like src="images/{item.src}" I know, this is incorrect.

 {itemData.map((item) => (
      <ImageListItem key={item.img}>
        <img            
        src="images/education.jpg"
        />
Solution

  • you can do:

    {itemData.map((item, i) => (
  <ImageListItem key={item.img}>
    <img src={"images/" + itemData[i].src} />
  </ImageListItem>
)}

    Or another way you can do:

    {itemData.map((item, i) => (
  <ImageListItem key={item.img}>
    <img src={`images/${itemData[i].src}`} />
  </ImageListItem>
)}