Detail.js 상세페이지 사진 질문입니다.

[이도아]

1. Detail.js  <상세페이지>

<div className="row">
        <div className="col-md-6">
          <img src='https://codingapple1.github.io/shop/shoes' + (props.shoes.id + 1) + '.jpg' width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>

 

 

2. App.js<메인페이지>

 

<부모>

<div className="container">

  <재고context.Provider value={재고}>

<div className="row">
  {
  shoes.map(function(i,a){
    return <Gift shoes={shoes[a]} a={a}/>
  })

  }
</div>
</재고context.Provider>

 

 

 

<자식>

function Gift(props){

  let 재고 = useContext(재고context);
  let history = useHistory();

  return(
    <div className="col-md-4" onClick={()=>{ history.push('/detail/'+ props.shoes.id) }}>
      <img src={'https://codingapple1.github.io/shop/shoes' + (props.a + 1) +'.jpg'} width="100%"></img>
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}&{props.shoes.price}</p>
      <p>{재고[props.a]}</p>
    </div>
  )
}

 

 

App.js에서처럼 똑같이 따라 쳤는데, Detail.js에서는 안먹히네요 ㅠㅠ

상세페이지인 Detail.js에서도 App.js처럼 사진이 상품 그대로 보였으면 좋겠는데, 어떡하면 좋을까요?

 

App.js처럼 props로 a를 가져와도 오류가 나네요... 

 

[강성구]

에러 문구를 볼 수 있을까요?

[codingapple]

app.js에 있는 shoes라는 데이터를 detail.js에서도 쓰고 싶은데 props.shoes해도 안나온다는 것입니까 

그렇다면 1. app.js는 props전송을 잘 했는가 2. detail.js는 props를 수신을 잘 했는가 확인합니다

3. id라는 것도 잘 있는 변수인지 확인합니다

이것만 보면 될걸요 

[이도아]

https://blog.naver.com/jmje1992/222364583212

 

번거로우시겠지만, 블로그에 자세히 올려두었으니 혹시 시간 괜찮으실때 봐주시면 정말 감사할것같습니다 ㅠㅠㅠ 

[codingapple]

<img src=""> 데이터바인딩할 때 중괄호를 안쓴듯요?

<img src={}>

[글쓴이]

글