I'm trying to implement dynamic routing and want to hand over the value when card is clicked.
For this, I made json file and product list component and product detail page component.
To deliver data that fits each card, I used useParams and filter function to match parameter.

Each url of detail page is well divided but, data from json file for the page is not handed over.
I think the usage of filter function is wrong. So, I upload the entire code, but I think you can just check the filter function part of the code Products.jsx.
May I know how to modify it??

data.json

{
  "products": [
    {
      "id": 1,
      "name": "shirts",
      "price": 193700,
      "checked": true,
      "amounte": 1,
      "img": "https://shopimg.kakaofriendsgolf.com/live/images/2022/8/23/18/551886_1661246483199.png"
    },
    {
      "id": 2,
      "name": "pants",
      "price": 128700,
      "checked": true,
      "amounte": 1,
      "img": "https://shopimg.kakaofriendsgolf.com/live/images/2022/8/22/18/18783_1661159105201.png"
    },
    {
      "id": 3,
      "name": "vest",
      "price": 167700,
      "checked": true,
      "amounte": 1,
      "img": "https://shopimg.kakaofriendsgolf.com/live/images/2022/9/7/10/918997_1662515279620.png"
    }
  ]
}

Cards.jsx (this is list of products)

import styled from "styled-components";
import dummy from "../database/data.json";
import { useState } from "react";
import { Link } from "react-router-dom";

export default function Cards() {
  // json to state
  const [data, setData] = useState(dummy.products);

  return (
    <Wrap>
      <div className="cardWrap">
        {data.map((item) => {
          return (
            <Link
              to={`/product/${item.id}`}
              style={{ textDecoration: "none", color: "inherit" }}
            >
              <div key={item.id} className="card">
                <div className="card__imgWrap">
                  <img className="card__img" alt="product" src={item.img} />
                </div>
                <div className="card__nameWrap">
                  <div className="card__name">{item.name}</div>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </Wrap>
  );
}

const Wrap = styled.div`
  overflow: scroll;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .cardWrap {
    border: 1px solid black;
    display: inline-flex;
    flex-direction: column;
    position: relative;
    top: calc(50vh - 100px);
    left: calc(50vw - 100px);
  }

  .card {
    border: 1px solid red;
    display: inline-flex;
    flex-direction: column;
  }

  .card__imgWrap {
    border: 1px solid green;
    width: 5rem;
    height: 5rem;
  }

  .card__img {
    width: 5rem;
    height: 5rem;
  }

  .card__nameWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid orange;
    box-sizing: border-box;
  }

  .card__name {
    display: flex;
  }
`;

Products.jsx (this is detail page of products. I guess filter function of this component is wrong)

import styled from "styled-components";
import dummy from "../database/data.json";
import { useParams } from "react-router-dom";

export default function Product() {
  // parameters for dynamic routing
  const params = useParams().id;

  // I think this part is wrong
  const productList = dummy.products.filter(
    (item) => item.params === Number(params)
  );

  console.log("productList :", productList);

  return (
    <Wrap>
      <div>
        {productList.name}
      </div>
    </Wrap>
  );
}

const Wrap = styled.div``;

I will also attach the codesandbox for easier understanding of the code.

codesandbox

CodePudding user response：

First of all you're comparing the id with params in your filter in Product component, you should compare with the id.

Second thing, with the filter function you will get an array, it is better to use find :

const productList = dummy.products.find(
    (item) => item.id === Number(params)
);

CodePudding user response：

const productList = dummy.products.find(
(item) => item.id === Number(params) // let productList recieve the item value when item.id = Number(params)
);

item is your object product it does not have any attribute params