react router3 강의 숙제 관련 질문 있습니다

[kmj]

제가 자바스크립트에 익숙하지 않아서 일단 제가 할 수 있는 반복문으로 구현을 해보았는데, 다른 오류도 아니고 id를 인식할 수 없다고 오류가 뜨는데 뭐가 문제인지 모르겠습니다. 제가 봐도 제 코드가 약간 허접한 것 같긴 한데.. 반복문으로 짜려면 어떻게 고쳐야 할까요?

일단 제가 짠 코드는 useParams를 담고 있는 id변수랑 props.shoes 전체의 id값을 비교해서 같으면 title을 보여주는 식으로 짰고 map함수를 이용해보았습니다

 

import React, {useState} from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props) {

    let { id } = useParams();
    let history = useHistory();

    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    이미지
                </div>
                <div className="col-md-6 mt-4">
                <h4 className="pt-5">
                    {props.shoes.map((i)=>{
                        return(
                            id === props.shoes[i].id
                            ? props.shoes[i].title
                            : null
                        )
                    })}
                </h4>
               
                <p>{props.shoes[id].content}</p>
                <p>{props.shoes[id].price}원</p>
                <button className="btn btn-danger">주문하기</button>
                <button className="btn btn-danger" onClick={()=>{
                    history.goBack();
                }}>뒤로가기</button>  
                </div>
            </div>
        </div>
    )
  }

  export default Detail;

 

Detail.js이고 오류사항은 다음과 같습니다

[codingapple]

밑의 글들처럼 id를 문자말고 숫자로 바꿔봅시다 

[글쓴이]

글