현재 영수증 기능을 만들고 있는데 질문이 있습니다.

안녕하세요 제가 영수증 기능을 만들다 막히는 부분이 생겼습니다.  밑의 코드에서 가장 아래  Receipt부분에 상품명, 가격 같은 곳에

props.cartlist에 대한 정보를 넣어야 하는데 어디서 반복문을 이용해야 할지 모르겠습니다... 아니면 저렇게 말고 다르게 할 방법이 있을까요? 

import { Table,Button } from 'react-bootstrap';
import './css/cart.scss';
import React, { useEffect, useState } from 'react'; 

function Cart (props){
  let [state,state변경] = useState(false);

  return(
    <div>
      <Table striped bordered hover variant="dark" className="center">
        <thead>
          <tr>
            <th>id</th>
            <th>상품명</th>
            <th>생산지</th>
            <th>가격</th>
            <th>수량</th>
            <th></th>
            <th>삭제</th>
          </tr>
        </thead>
        <tbody>
          {
            props.cartlist.map((e,i) => {
              return(
                <Itme_list el={e} index={i} cartlist={ props.cartlist } cartlist변경={ props.cartlist변경 }/>
              )
            })
          }
        </tbody>
      </Table>
      {
        state === true ? <Receipt cartlist={ props.cartlist }/> : null
      }
      <div className="order">
        <Button variant="secondary" onClick={() => {
          state변경(true);
        }}>구매하기</Button>{''}
      </div>
    </div>
  )
}

function Itme_list(props){
  return(
    <>
      <tr>
        <td>{props.el.id}</td>
        <td>{props.el.title}</td>
        <td>{props.el.content}</td>
        <td>{props.el.price}</td>
        <td>{props.el.qua}</td>
        <td>
          <button onClick={() => {
            let list = [...props.cartlist];
            list[props.index].qua++;
            props.cartlist변경(list);
          }}>+</button>
          <button onClick={() => {
            let list = [...props.cartlist];
            if(list[props.index].qua === 0){
              return list;
            }
            else{
              list[props.index].qua--;
            }
            props.cartlist변경(list);
          }}>-</button>
        </td>
        <td>
          <button onClick={() => {
            let list = [...props.cartlist];
            list.splice(props.index, 1);
            props.cartlist변경(list);
          }}>X</button>
        </td>
      </tr>
    </>
  )
}

function Receipt(props){
  return(
    <>
      <div className="page">
        <p>상품명{  }</p>
        <p>가격{}</p>
        <p>수량{}</p>
        <p>총 합계{}</p>
      </div>
    </>
  )
}

export default Cart;