JSON value inside href tag in react [duplicate]

Question

So I have a JSON where I'm fetching data.

Example of JSON:

 { "postid": "123123, "title": "title of post", }

I'm trying to add this id inside an href like <a href="https://example.com/{data.post}">Post</a> but it doesn't render, I get a https://example.com/{data.post} url in the frontend. (Doing <p>{data.post}</p> renders the post ID normally.)

Is there a way to get the field inside an href tag? Or should I make another field on my JSON with the full URL?

Dana Woodman · Accepted Answer · 2020-04-20 14:38:55Z

Pass in a template literal as a normal value:

<a href={`https://example.com/${data.post}`}>Post</a>

Please see these docs on how to pass attributes to a JSX element. The above is just simply a Javascript tempalate liter passed in as a prop to the <a> tag.

Collectives™ on Stack Overflow

JSON value inside href tag in react [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related