CODEWITHSUNDEEP
javascriptreactjsaxios
BennKingy
BennKingy

Reputation: 1593

url not working in ahref, but does in plain text

I am creating a spfx widget using react that consumes a JSON api end point. It then spits out the lastest few posts.

When adding the {url} variable into an <a href=""></a> - The url is a random localhost one instead of the full url

  <a href="{url}">{url}</a>

The {url} inside the a tag is the actual full link https://etc.. but the one inside href="" turns into a localhost link like: https://localhost:4321/temp/%7B%60url%60%7D

Any ideas why?!

Upvotes: 1

Views: 96

Answers (3)

Sumit
Sumit

Reputation: 97

The value inside the curly brackets is expected to be a JavaScript Expression i.e., a function, an object, a variable, or any code that will be calculated later. But passing the value within double quotes turns it into a simple string. So to solve this issue use

<a href={url}>{url}</a>

Upvotes: 0

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

The problem is because of the double quotes surrounding the JSX variable.

<a href={url}>{url}</a>

Updating it like so would work

Upvotes: 1

Ross Allen
Ross Allen

Reputation: 44900

When you want to run JavaScript for an attribute, use curly brackets but no quotation marks:

<a href={url}>{url}</a>

Upvotes: 7

Related Questions