CODEWITHSUNDEEP
javascriptreactjs
David
David

Reputation: 36354

React escaping vars inside an element

  {emails.map(item => (
      <tr><td>{item.date}</td><td>{item.from}</td><td>{item.to}</td><td>{item.subject}</td><td><a href="{item.s3_key}">view</a></td></tr>
    ))}

I am trying to set the href="{item.s3_key}" but it just returns the string literal. I can't see docs for this, can someone help?

Upvotes: 2

Views: 64

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You should avoid using quotes on attribute or props value which contains variable value:

<a href={item.s3_key}>

And if you want to combine string then you may use like:

<a href={'view/'+item.s3_key}>

Or using template literal like:

<a href={`view/${item.s3_key}`}>

Upvotes: 3

bananaspy
bananaspy

Reputation: 551

Just remove quotes from prop value:

{emails.map(item => (
  <tr>
    <td>{item.date}</td><td>{item.from}</td>
    <td>{item.to}</td><td>{item.subject}</td>
    <td><a href={item.s3_key}>view</a></td>
  </tr>
))}

Or if you need to join some text value use es6 template literals:

<a href={`any-additional-text-here${item.s3_key}or-here`}>

Upvotes: 0

kind user
kind user

Reputation: 41893

With quotes around the item.s3_key, it will be parsed as a string. Remove it to get the desired result.

href={item.s3_key}

Upvotes: 5

Related Questions