A white screen appears on the screen because the product is not received as props in PetItem.js.
<code>import React from "react";
import "../PetItems/Items.css";
import { Link } from "react-router-dom";
export default function PetItem({ product }) {
const { imgURL, name, funding, id } = product;
return (
<div className="product">
<Link to={`/ItemsPage/${id}`}>
<img src={imgURL} alt={name} />
<div className="item-detail first second">
<p className="funding-title"></p>
<p className="item-name">{name}</p>
<p className="item-funding">
<span className="funding">펀딩:</span> {funding}
</p>
<p className="FundingPeriod">
<span className="period">펀딩기간:</span>
</p>
</div>
</Link>
</div>
);
}
</code>
<code>import React from "react";
import "../PetItems/Items.css";
import { Link } from "react-router-dom";
export default function PetItem({ product }) {
const { imgURL, name, funding, id } = product;
return (
<div className="product">
<Link to={`/ItemsPage/${id}`}>
<img src={imgURL} alt={name} />
<div className="item-detail first second">
<p className="funding-title"></p>
<p className="item-name">{name}</p>
<p className="item-funding">
<span className="funding">펀딩:</span> {funding}
</p>
<p className="FundingPeriod">
<span className="period">펀딩기간:</span>
</p>
</div>
</Link>
</div>
);
}
</code>
import React from "react";
import "../PetItems/Items.css";
import { Link } from "react-router-dom";
export default function PetItem({ product }) {
const { imgURL, name, funding, id } = product;
return (
<div className="product">
<Link to={`/ItemsPage/${id}`}>
<img src={imgURL} alt={name} />
<div className="item-detail first second">
<p className="funding-title"></p>
<p className="item-name">{name}</p>
<p className="item-funding">
<span className="funding">펀딩:</span> {funding}
</p>
<p className="FundingPeriod">
<span className="period">펀딩기간:</span>
</p>
</div>
</Link>
</div>
);
}