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?

You don't have to to change anything about HTML syntax to set a basic attribute in React, unless it's a multi-word attribute, which in some cases is camelCased. But simply putting <a href="/users/users/authentication" rel='nofollow'> should work. — Chris B.
– Chris B., Commented May 14, 2019 at 15:38
I believe this is exactly what you're looking for stackoverflow.com/questions/38619182/… — kantuni
– kantuni, Commented May 14, 2019 at 15:39

dance2die · Accepted Answer · 2019-05-14 15:47:26Z

9

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.

answered May 14, 2019 at 15:47

dance2die

37.2k39 gold badges137 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amir-Mousavi · Accepted Answer · 2019-05-14 15:37:53Z

0

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

answered May 14, 2019 at 15:37

Amir-Mousavi

4,65315 gold badges79 silver badges135 bronze badges

Comments

gergana · Accepted Answer · 2019-05-14 15:38:21Z

0

You can set rel like this:

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

answered May 14, 2019 at 15:38

gergana

6917 silver badges11 bronze badges

Collectives™ on Stack Overflow

Insert React variable as attribute in HTML tag

3 Answers 3

1 `rel` is a text.

2 `rel` is an object.

Demo

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 rel is a text.

2 rel is an object.

Demo

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1 `rel` is a text.

2 `rel` is an object.