Just playing with REACTJS and this simple if statement is driving me crazy…..
I have comment around the “link” area where I’d like to have an IF statement so that the link will only show if the {link} parameter passed has a value …..
Hope that makes sense :
//import { BsGithub } from "react-icons/bs";
//import { FaYoutube } from "react-icons/fa";
import { FaEye } from "react-icons/fa";
interface Props {
title: string;
des: string;
src: string;
link: string;
}
const ProjectsCard = ({ title, des, src, link}: Props) => {
return (
<div className="w-full p-4 xl:px-12 h-auto xl:py-10 rounded-lg shadow-shadowOne flex flex-col bg-gradient-to-r from-bodyColor to-[#202327] group hover:bg-gradient-to-b hover:from-gray-900 hover:gray-900 transition-colors duration-1000">
<div className="w-full h-[80%] overflow-hidden rounded-lg">
<img
className="w-full h-60 object-cover group-hover:scale-110 duration-300 cursor-pointer"
src={src}
alt="src"
/>
</div>
<div className="w-full mt-5 flex flex-col gap-6">
<div>
<div className="flex items-center justify-between">
<h3 className="text-base uppercase text-designColor font-bold">
{title}
</h3>
<div className="flex gap-2">
// Need if Statement here ... show link only if 'link' parameter has a value
// Guess I can't do if {link.length} > 0 {
<a href={link} target="_blank">
<span className="text-lg w-10 h-10 rounded-full bg-black inline-flex justify-center items-center text-gray-400 hover:text-designColor duration-300 cursor-pointer">
<FaEye />
</span>
</a>
// end if statement here
</div>
</div>
<p className="text-sm tracking-wide mt-3 hover:text-gray-100 duration-300">
{des}
</p>
</div>
</div>
</div>
);
};
export default ProjectsCard;
I tried :
if {link.length} > 0 {}
also
{link} ? :
New contributor
timroman is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.