13

I am searching for inline conditional solution for Href attribute in jsx. I wanted to output if i provide an url:-

<a className="navbar-brand" href="/example-url" >Logo</a>

And if not:-

<a className="navbar-brand">Logo</a>

3 Answers 3

33

Simplest Solution

React removes attributes whose values are undefined or null.

You didn't specify how you're wanting to conditionally provide the URL, but for now, I'll just assume you have a url variable that's set to a string when you want to include the href attribute on the anchor, and undefined when you want to omit it.

In this case, you can use url for the value of the attribute as-is, and React will only add the href attribute when its value isn't undefined or null:

return (
  <a className="navbar-brand" href={url}>Logo</a>
)

This works great if you want to exclude the attribute based on whether the url is a string or undefined or null, but that might not always be the condition you want to check. In these additional cases, you can use the conditional ternary operator to conditionally return undefined or null for whatever condition makes sense.

For example, if url was an empty string, the previous snippet would actually still set the href attribute which might not be what you wanted/expected. To avoid that, you could use a conditional ternary to return undefined if the URL isn't truthy:

return (
  <a className="navbar-brand" href={url ? url : undefined}>Logo</a>
)

Alternative Solutions

If you find yourself wanting to change multiple (or different) attributes based on a condition, you can take things a bit further by combining conditional ternaries with spread attributes.

This example is a bit contrived, but let's say that in addition to conditionally including or excluding the href attribute, you also want to conditionally specify the class name based on whether the URL is truthy.

You could do this by using spread attributes with a ternary conditional:

return (
  <a {...url
    ? { className: "navbar-brand", href: url }
    : { className: "navbar-brand inactive" }
  }>
    Logo
  </a>
)

You could also prepare the attributes at the beginning of the function to keep things more readable:

const attributes = url
  ? { className: "navbar-brand", href: url },
  : { className: "navbar-brand inactive" };

return (
  <a {...attributes}>Logo</a>
)

Of course, if the differences between the desired elements are substantial enough, you might just be better off returning completely different elements rather than using spread attributes.

(And if the ternary condition is being used to determine the root of the element, then you can drop the surrounding { and } since the compiler isn't interpreting JSX yet.)

return (
  <div>
    {url
      ? <a className="navbar-brand" href={url}>Logo</a>
      : <a className="navbar-brand inactive">Logo</a>
    }
  </div>
)

Ultimately, which approach you'll want to take will depend on how you're deciding to include or exclude the attribute(s), how many (and how) the attributes differ, and what fits the style of your codebase the best.

For more information or alternatives, I'd recommend reading this related question.

2
  • Thank you Ryan.<a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a> works for me
    – JA9
    Aug 24, 2018 at 5:38
  • 1
    @Ankit Some good examples of this can be found at reactjs.org/docs/jsx-in-depth.html#spread-attributes. Essentially, the spread attribute lets you add additional attributes to an element using an existing object. Combined with the conditional operator (a ? b : c), this answer uses spread attributes to either add {href: url} or {}, depending on whether the URL is truthy or not. The second example demonstrates this more clearly. Aug 24, 2018 at 5:44
0

try this

Above render method

let linkAttrs={}
url="/example-url"//Or empty
linkAttrs.className="navbar-brand"
if(url !=="")
   linkAttrs.href=url;

In render method

<a {...linkAttrs}>Logo</a>
0

You could have your URL as a string in state such as

this.state = {
   url: String
}

and then in your render function inside the return section, create a statement like:

  {
    (
      this.state.url &&
      <a className="navbar-brand" href={this.state.url}>Logo</a>
    )
    || <a className="navbar-brand">Logo</a>
  }
3
  • Hey.I need something that i can put inside anchor tag.
    – JA9
    Aug 24, 2018 at 5:28
  • Hey, as far as I am aware the only way to do this is something mentioned in my answer or the answers above. You can't, for example, put a conditional inside the tag that controls whether the anchor tag has the href attribute. See this article for more info. Aug 24, 2018 at 5:38
  • I got the answer,you can do like this:- <a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a>
    – JA9
    Aug 24, 2018 at 5:40

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.