Href link issues - html

Question

I am trying to display all the projects I have coded in my career for my portfolio. I made them into an obj called projects and have mapped through them to render. The problem is that a lot of them are not deployed yet so, for those I want an alert saying "not linked yet" but the link is defaulted to local:3000 and just reloads the page
portfolio: [
{
name: "OmniFood",
description: "",
imgurl: "https://media.giphy.com/media/hvLOGi1KsF02XiZ1DD/giphy.gif",
href: "https://github.io/SbOmniFood/"
},
{
name: "Forkify",
description: "",
imgurl: "https://media.giphy.com/media/ekeOYzzNEpW73RIcSb/giphy.gif",
href: ""
},
{
name: "Connect Four",
description: "",
imgurl: "https://media.giphy.com/media/YrC2lEAcG4loOj2aLI/giphy.gif",
href: ""
},
here is how i render it.
<section id="portfolio">
<h1>Check Out Some of My Projects!</h1>
<div className="portfolioGrid">
{resumeData.portfolio &&
resumeData.portfolio.map(item => {
return (
<a href={`${item.href}`} target="_blank">
<div className="portfolio-item portfolioGridSquare">
<div className="item-wrap">
<div>
<img
src={`${item.imgurl}`}
alt="my projects"
className="item-img"
/>
<div className="overlay">
<div className="portfolio-item-meta">
<h5>{item.name}</h5>
<p>{item.description}</p>
</div>
</div>
</div>
</div>
</div>
</a>
);
})}
<div id="portfolio-wrapper" className=""></div>
</div>
</section>

Answer 1

You should only render a link if the project has a valid href. For example:
const PortfolioList = () => (
<div className="portfolioGrid">
{portfolio.map(item => item.href ? (
<a href={item.href} target="_blank">
<PortfolioItem item={item} />
</a>
) : (
<div onClick={() => alert("not linked yet")}>
<PortfolioItem item={item} />
</div>
))}
</div>
);
const PortfolioItem = ({ item }) => (
<div className="portfolio-item portfolioGridSquare">
<div className="item-wrap">
<div>
<img src={`${item.imgurl}`} alt="my projects" className="item-img" />
<div className="overlay">
<div className="portfolio-item-meta">
<h5>{item.name}</h5>
<p>{item.description}</p>
</div>
</div>
</div>
</div>
</div>
);