How to display the image and title which are in array

Question

When I put the below in the jsx element code of react return, the three images and titles are rendered correctly:

<center>
  <div className='container p-1'>
    <img className='img' src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img>
    <div className="caption">asin_product_title<br></br>
      <small className='ellipsis'>Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</small>
      <span className="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
    </div>
  </div>
  <div className='container p-1'>
    <img className='img' src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
    <div className="caption">right_product_title<br></br>
      <small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
      <span className="tooltiptext">Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
    </div>
  </div>
  <div className='container p-1'>
    <img className='img' src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
    <div className="caption">asinHeadline1<br></br>
      <small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
      <span className="tooltiptext">Third Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
    </div>
  </div>
</center>

This is how above code looks like:

Now I have to optimize the code of images and title, like from backend API I will be receiving an array or list of the URLs or images as follows:

const imageUrlArray = ['http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg','http://ecx.images-amazon.com/images/I/518Se4188mL.jpg'];
const titleAttributeArray = ['asin_product_title','right_product_title'];
const titleNameArray =['Electrolux EENB54EB Ultraenergica Classic Aspirapolvere'
        ,'Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy']

So basis the size of the imageUrlarray I would have to display these containers instead of hardcoding it one by one.

Approach 1 that I tried:

{imageUrlArray.forEach((url,ind)=>{
   return(
      <div className='container p-1'>
         <img className='img' src={url}></img>
         <div className="caption">{titleAttributeArray[url]}<br></br>
            <small className='ellipsis'>{titleNameArray[url]}</small>
            <span className="tooltiptext">{titleNameArray[ind]}</span>
         </div>
      </div>);
})}

I get no error for this but on my webpage, it is completely blank for the above code. Please see:

I want to display those image containers on demand based on array received from backend. Can someone please help me achieve this?

Answer 1

forEach() doesn't return anything which is required for this behavior to work in React. I think map() is the operation you are looking for. The returned value of the map is what is being rendered to your DOM.

Replace forEach with map and the rest of your logic will still work (except the bug where you use url as the index for the titleAttributeArray and titleNameArray)

See this question for some excellent explanations about the differences! JavaScript: Difference between .forEach() and .map()