How to render SVG based off of a ternary operator

Question

I'm trying to setup a ternary operation to either show a SVG inside of an a tag or not based off of whether a link is present or not. I'm using Sanity to pull the links from.

<a href={project.link} class="z-10" rel="noopener noreferrer" target="_blank">
    <svg> img code here... </svg>                        
</a>

In plain english...if the project contains a link, render the SVG link to the project

What I tried but didn't work:

<a className={`${project.link ? "" : "none"}`} href={project.link} class="z-10" rel="noopener noreferrer" target="_blank">
    <svg> img code here... </svg>                        
</a>

My question is, what do I put as the first condition if I want to render the SVG?

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Jul 20 '21 at 22:31
Yes it does, I wish I had found this earlier. It probably didn't show because I wasn't using the best search terms to describe what I wanted to achieve. Thanks for pulling this out — wayoh22, Jul 20 '21 at 23:45

score 1 · Accepted Answer · answered Jul 20 '21 at 19:54

1

I am making some assumptions about the blanks in your question, so please feel free to correct me.

The first option is to only show the entire block if project link is set.

{project.link ? <a className.......><svg></svg></a> : null}

Or simply use the same ternary condition for the SVG, as such:

<a className.....>
   {project.link ? <svg>...</svg> : null}
</a>

answered Jul 20 '21 at 19:54

Riley Pagett

363
1
7

The second option worked. I was under the impression from googling and from all the SO answers I read that the conditions had to be in quotes. Evidently not. Thank you! – wayoh22 Jul 20 '21 at 20:01

score 0 · Answer 2 · answered Jul 20 '21 at 20:06

The code that you have tried will always show the svg image, whether the link is present on not, because the condition is not set on the svg but on the tag.

<a className={`${project.link ? "" : "none"}`} href={project.link} class="z-10" rel="noopener noreferrer" target="_blank">
    <svg> img code here... </svg>                        
</a>

So, In React you can follow different approaches. You can set the state for your component and assign the link to that state, and when that state is true show the svg, If not do not show.

I am giving you an idea and you can follow accordingly as per your requirement, because I do not know how you are getting the link and when it is not available:

import React,{useState} from 'react';

const MyComponent = ()=>{
   const [isLink, setIsLink] = useState(project.link);

   return(
    <a href={`${project.link? project.link:"Dummy Link"}`} class="z-10" rel="noopener noreferrer" target="_blank">
       { isLink && <svg> img code here... </svg> }
    </a>
    )
}

This is actually a really interesting way of going about it, I didn't think of it like that. Pretty new to react so I will have to give this some more thought and potentially utilize it on something similar. thanks! — wayoh22, Jul 20 '21 at 20:14

How to render SVG based off of a ternary operator

2 Answers2