Card 컴포넌트 만들기

쇼핑몰 앱 card 컴포넌트 만드는 강의에서 App 함수에 map을 사용하여 반복되는 부분을 줄이셨는데, 
저는 하위 컴포넌트인 Card 컴포넌트에서 map을 사용하여 반복되는 부분을 줄이려고 했습니다. 근데 뭔가 잘못한건지 에러가 나는데 이렇게 하면 안되는 건가요?
코드 한번 봐주시면 좋을 것 같습니다. 감사합니다.

function App(){
...

<ProductList clothes={clothes} i={i}></ProductList>
...
}

function Card(props){
  clothes.map((a,i)=>{
    return(
      <li className="product-list">
          <img className='list' src={process.env.PUBLIC_URL+`/img/clothes_${props.i}.png`}></img>
            <h2>{props.clothes[i].title}</h2>
            <p>{props.clothes[i].content}</p>
      
    )
  })}