I am working on my personal portfolio site with React and Tailwind. I am trying to figure out how to display the "GitHub" button for my project card only when I provide a GitHub link via my data.js file.
I am using a card component and the map method to display a card for each project provided in the data.js. As you can see, I don't provide a GitHub link to the first project, but I do on the second one. How can I make the GitHub button appear for projects I only provide a GitHub link?
I tried to create a function to display the button only when there is an href value provided but that did not work. Any suggestions that can lead me in the right direction are highly appreciated.
GitHub repo: https://github.com/fotinh0/my-portfolio
data.js
export const projects = [
{
title: "PCI Media Website",
subtitle: "Company Website using WordPress",
description:
"Maintained PCI Media's multi-page website as an intern using WordPress with the Divi theme. Increased traffic using SEO techniques and Google Analytics",
skills: "Built with: WordPress, HTML, CSS",
image: "./gif-files/pcimedia.gif",
link: "https://www.pcimedia.org/",
github: ""
},
{
title: "Keeper App",
subtitle: "React Clone of Google Keep",
description:
"Keep track of your notes and your to-do's using the Keeper App. Inspired by the Google Keep application.",
skills: "Built with: React, Material UI",
image: "./gif-files/keeper-app.gif",
link: "https://keeper-app-fc.netlify.app/",
github: "https://github.com/fotinh0/keeper-app"
}, ...
Projects.js
import { projects } from "../data";
export default function Projects() {
return (
<section id="projects" className="...">
<div className="container ...">
{/* additional code here */}
{/* Projects Cards */}
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
className="sm:w-1/2 w-100 p-4">
{/* additional code here */}
<div className="project-buttons ...">
<a className="live-site ..." href={project.link} target="_blank"> Live Site</a>
<a className="github ..." href={project.github} target="_blank">GitHub</a>
</div>
</a>
))}
</div>
</div>
</section>
);
}
Use a condition, like this:
{project.github && (
<a className="github ..." href={project.github} target="_blank">GitHub</a>
)}
You might want to check if the variable has a length greater than zero, then you can do:
{project.github.length > 0 && (
<a className="github ..." href={project.github} target="_blank">GitHub</a>
)}
There a few ways to conditionally render elements/components:
You can use the && operator
{project.github &&
<a className="github ..." href={project.github} target="_blank">GitHub</a>
}
or you can use a ternary expression:
{project.github ?
<a className="github ..." href={project.github} target="_blank">GitHub</a>
: null
}
There are additional ways to achieve that, what's important to remember is that they all involve introducing a condition to determine whether the element should render or not.
import { projects } from "../data";
export default function Projects() {
const renderGithubButton = (github) => {
// If github.project is empty then it will show nothing
// But if github.project exists then else will return
if(github.length===0) return ""
else return <a className="github ..." href={project.github} target="_blank">GitHub</a>
}
return (
<section id="projects" className="...">
<div className="container ...">
{/* additional code here */}
{/* Projects Cards */}
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
className="sm:w-1/2 w-100 p-4">
{/* additional code here */}
<div className="project-buttons ...">
<a className="live-site ..." href={project.link} target="_blank"> Live Site</a>
//Create a new function to check github exists or not.
// send project.github as argument
{renderGithubButton(project.github)}
</div>
</a>
))}
</div>
</div>
</section>
);
}