03. find() 함수로 원하는 요소 반환

find()

array자료.find(()=>{ return 조건식 }) 

함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환합니다.

조건을 일치하는 경우가 없다면, undefined를 반환합니다.

 

Q.

useParams에 일치하는 Id가 아닌 object가 지닌 id 값으로 페이지를 찾으려면 어떻게 해야하나요?

 

import React from "react";
import { useParams } from "react-router-dom";

const Item = (props) => {
  let { id } = useParams();

  const ItemId = props.shoes.find((e) => e.id == id);

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{ItemId.title}</h4>
          <p>{ItemId.content}</p>
          <p>{ItemId.price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
        {/* url 파라미터에 이상한 거 입력하면 id라는 변수가 이상하면 상품없다는 ul 보여주면 된다. */}
      </div>
    </div>
  );
};

export default Item;

(1) useParams의 Id값과 배열 object의 id 값이 일치하는 요소의 값을 반환 시켜 변수에 담아준다.

array자료.id == url에입력한번호

let ItemId = {object}

 

(2) html 데이터 바인딩

   <p>{ItemId.content}</p>

 

 

 

참고 블로그 : https://developer-talk.tistory.com/151