JSX: Inline conditional attribute [href]

Question

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>

Answer 1

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.

Answer 2

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>

Answer 3

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