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} ? :