reactjs - How to render images from an array using the map() method?

Question

I'm trying to render my images that I stored in my array by using the map() method. Unfortunately I'm getting error when I'm trying to render the image from array but without using mapping I could render the images but I need to write the codes line by line. Could anyone help me with the solution?

const CardList = ({robots}) => {
const cardComponent = robots.map((user, i) => {
    return <Card src={robots[i].src} id={robots[i].id} name={robots[i].name} email={robots[i].email}/>
})
return(
    <div>
    {cardComponent}
    </div>
);

My CardList Component

const Card = ({name, email, id, src}) => {

return(
   <div className='bg-light-green dib br3 pa3 ma2 grow bw db w-20'>
         <img className='personal ' alt='robots' src={require(`${src}`)}/>
        <div>
             <h1>{name}</h1>
            <p>{email}</p>
        </div>
    </div>
)

My Card Component i feel there is something wrong with src={require(${src})}

and this is the error that i'm getting from react DOM:

Answer 1

yourArray.map((key, data) => {
  <ComponentToDisplay id={key} {...this.props} />
});