How to pass multiple key and their HTML tag attributes in React

Question

I have an a-tag looking like this

<a href={ item.htmlReportUrl } target="_blank" rel="noopener noreferrer">
{item.htmlReportText}</a>

which gets it's values for the href and the linktext from this

row.htmlReportUrl = res.db[key].htmlReport
row.htmlReportText = 'HTML Report'

My plan was now to in addtion pass

target="_blank" rel="noopener noreferrer"

in the same way. These attributes needs to be set just sometimes. But doing something like this

<a href={ item.finalUrl } { item.htmlReportAttributes }

isn't working.

Parsing error: Unexpected token, expected "..."

I guess it's added to the href? How can I pass multiple html attributes at once?

You may be forgetting spread operator "...", This '...' is syntax ` — JenuJ, Jun 20 '19 at 06:36

score 2 · Accepted Answer · answered Jun 20 '19 at 06:37

2

Try:

item.htmlReportAttributes["target"] = "_blank";
item.htmlReportAttributes["rel"] = "noopener noreferrer";
<a href={ item.finalUrl } { ...item.htmlReportAttributes } >{item.htmlReportText}</a>

answered Jun 20 '19 at 06:37

Raman Kishore

542
2
12

score 0 · Answer 2 · answered Jun 20 '19 at 06:35

0

You should define attribute like this

let customAttr= {'target': '_blank','rel':'noopener noreferrer'}

then pass in html tag as below:

<a href={item.finalUrl} {...customAttr} >Link title</a>

answered Jun 20 '19 at 06:35

Khushbu

655
7
17

score 0 · Answer 3 · answered Jun 20 '19 at 06:39

If you are checking state for the flag whether you want to use those extra attributes then you could try:

<a href={ item.finalUrl } target={this.state.addExtraAttributes == true ? "_blank" : ""} rel={this.state.addExtraAttributes == true ? "noopener noreferre" : ""} >

How to pass multiple key and their HTML tag attributes in React

3 Answers3