Estoy trabajando en mi sitio de cartera personal con React y Tailwind. Estoy tratando de descubrir cómo mostrar el botón "GitHub" para mi tarjeta de proyecto solo cuando proporciono un enlace de GitHub a través de mi archivo data.js.
Estoy usando un componente de tarjeta y el método de mapa para mostrar una tarjeta para cada proyecto proporcionado en data.js. Como puede ver, no proporciono un enlace de GitHub para el primer proyecto, pero sí en el segundo. ¿Cómo puedo hacer que aparezca el botón de GitHub para los proyectos en los que solo proporciono un enlace de GitHub?
Intenté crear una función para mostrar el botón solo cuando se proporcionó un valor href, pero eso no funcionó. Cualquier sugerencia que pueda llevarme en la dirección correcta es muy apreciada.
Repositorio de GitHub: https://github.com/fotinh0/my-portfolio
datos.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" }, ...Proyectos.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> ); }Usa una condición, como esta:
{project.github && ( <a className="github ..." href={project.github} target="_blank">GitHub</a> )}Es posible que desee verificar si la variable tiene una longitud mayor que cero, entonces puede hacerlo:
{project.github.length > 0 && ( <a className="github ..." href={project.github} target="_blank">GitHub</a> )}Hay algunas formas de renderizar condicionalmente elementos/componentes: Puede usar el operador &&
{project.github && <a className="github ..." href={project.github} target="_blank">GitHub</a> }o puede usar una expresión ternaria:
{project.github ? <a className="github ..." href={project.github} target="_blank">GitHub</a> : null }Hay formas adicionales de lograrlo, lo que es importante recordar es que todas implican la introducción de una condición para determinar si el elemento debe renderizarse o no.
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> ); }