Insert React variable as attribute in HTML tag

Question

I am trying to obtain the following line

<a href="/users/users/authentication" rel='nofollow'>

Note the rel='nofollow'

Within the render method of my React component, I have this JSX syntax:

render() {
  const rel = "rel='nofollow'";
  return (
    <div>
      <a href="/users/users/authentication" {rel}>
    </div>
  );
}

I get a :

Error: /~/Scripts/Navigation.jsx: Unexpected token, expected "..."

I also tried with

let rel = { __html: "<b>Hey</b>" };

and

<a href="/users/users/authentication" dangerouslySetInnerHTML={rel}>

which fails too but anyway dangerouslySetInnerHTML is supposed to inject some stuff between the opening and closing tag not within as an attribute of the tag.

What would be the correct JSX syntax to make that happen?

Answer 1

You'd first have to decide what "shape" of your rel value should be. Would it be a text? or would it be an object?

1 rel is a text.

If the rel is passed as a raw text, such as nofollow, you'd have to assign the rel property manually.

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    <a href="https://www.google.com" rel={rel}>
      Google
    </a>
  );
}

2 rel is an object.

If the rel was passed as an object, such as {rel: 'nofollow'}, then you can simply pass the object to the anchor element.

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    <a href="https://www.bing.com" {...rel}>
      Bing
    </a>
  );
}

You can see that both will add rel='nofollow' attribute.

Demo

You can follow along on CodeSandbox.