How can I hide a link with inline conditional styling in react?-CodePudding

I'm building my portfolio right now and I would like to hide the download link of my projects when href is empty

<GridContainer>
  {projects.map(({id, image, title, description, tags, source, visit, pdf}) => 
    <BlogCard key={id}>
      <div>
        <Img src={image} style={{alignContent:"flex-start", display:"flex"}}/>
        <br/>
        <TitleContent>
          <HeaderThree title>{title}</HeaderThree>
          <Hr />
        </TitleContent>
        <CardInfo>{description}</CardInfo>
      </div>
      <div >
        <br/>
        <TitleContent>Technologies utilisées :</TitleContent>
        <TagList>
          {tags.map((tag, i) => (
            <Tag key ={i}>{tag}</Tag>
          ))}
        </TagList>
        <UtilityList>
          <ExternalLinks href={source}>Code</ExternalLinks>
          <ExternalLinks href={pdf} download >PDF</ExternalLinks>
          <ExternalLinks href={visit}>Live</ExternalLinks>
        </UtilityList>
      </div>
    </BlogCard>
  )}
</GridContainer>

The href is imported from :

export const projects = [
  {
    title: 'test',
    description: "test",
      image: 'test',
      tags: ['PHP', 'MYSQL', 'HTML', 'CSS'],
    source: 'https://google.com',
    visit: 'https://google.com',
    pdf:'#',
    id: 0,
  },

I import the css from styled-components like so:

export const ExternalLinks = styled.a`

color:#d4c0c0;
font-size: 1.6rem;
padding:1rem 1.5rem;
background: #6b3030;
border-radius: 15px;
transition: 0.5s;
&:hover{
  background: #801414;
}
`;

The idea is to hide the PDF ExternalLinks only when pdf:'#' but I still don't know how to do that. Can you help me please ?

Tell me if you need some details about my code, and thanks for your help !

CodePudding user response：

You can use a ternary operator to conditionally render a particular element, in this case your ExternalLinks component and it'll not render, until the condition met.

{pdf.length > 1 ? <ExternalLinks href={pdf} download >PDF</ExternalLinks> : null}

You can alter this condition(pdf.length > 1) based on the data set you've.

CodePudding user response：

You could wrap the component effected in a condition checking that the value of href is not equal to "#".

{pdf !== "#" ? <ExternalLinks href={pdf}>PDF</ExternalLinks> : null }