JSON value inside href tag in react

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?

score 0 · Accepted Answer · answered Apr 20 '20 at 14:38

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.

JSON value inside href tag in react

1 Answers1