detail 페이지의 사진

[정민]

이미지에 링크를 넣어 해당 id값의 페이지로 넘어가는것은 구현했는데
사진이 다 똑같은 제품 사진으로 되어 있습니다.
같은 방식으로 
<img src={"https://codingapple1.github.io/shop/shoes"+props.i+"jpg"}
              width="100%"
              alt="img"/> 
이렇게 접근했더니 이미지가 깨져버리네요 이런건 어떤식으로 접근해야 하나요?

[codingapple]

jpg 왼쪽에 점찍어봅시다

[정민]

마찬가지로 img 파일을 불러올 수 없습니다 ㅠ

[codingapple]

props.i가 undefined라는거같은데 props 잘 보내고 있나 확인합시다

[정민]

App.js > card 컴포넌트에서 받아오는 props와
detail 컴포넌트에서 받아오는 props가 다른 것 같습니다.

console
data를import 했는데 props는 출력이 되는데 props.i가 출력이 안됩니다.

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import data from "../data";

function Detail(props) {
  useEffect(() => {
    setTimeout(() => {
      setAlert(false);
    }, 2000);
  }, []);

  useEffect(() => {
    if (isNaN(num) === true) {
      alert("숫자만 입력하세요");
    }
  });

  let [count, setCount] = useState(0);
  let [alert, setAlert] = useState(true);

  let { id } = useParams();
  let [num, setNum] = useState("");

  return (
    <div>
      <div className="container">
        {alert === true ? (
          <div className="alert alert-warning">2초 안에 클릭하면 ...!!!!</div>
        ) : null}

        {count}
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          버튼
        </button>
        <div className="row">
          <div className="col-md-6">
            <img
              src={
                "https://codingapple1.github.io/shop/shoes" + props.i + ".jpg"
              }
              width="100%"
              alt="shoes"
            />
          </div>
          <div className="col-md-6">
            <h4 className="pt-5">{props.shoes[id].title}</h4>
            <p>{props.shoes[id].content}</p>
            <p>{props.shoes[id].price}원</p>

            <button className="btn btn-danger">주문하기</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Detail;

[codingapple]

Detail 컴포넌트 쓸 때 props 어떻게 보내고 있나 확인하면 됩니다

[정민]

detail 컴포넌트 안에서 props.i를 쓸 때도 detail을 props로 내보내고 다시 받아와야 하나요?
아니면 useState를 써서 변경될 때의 값을 받아와야 하나요?

[codingapple]

<Detail i={어쩌구} /> 이것만 잘 하고있는지 확인하면 됩니다

[글쓴이]

글