CODEWITHSUNDEEP
javascriptreactjs
Connor Leech
Connor Leech

Reputation: 18873

How to create dynamic href in react render function?

I am rendering a list of posts. For each post I would like to render an anchor tag with the post id as part of the href string.

render: function(){
    return (
        <ul>
            {
                this.props.posts.map(function(post){
                    return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

How do I do it so that each post has href's of /posts/1, /posts/2 etc?

Upvotes: 156

Views: 254725

Answers (4)

thalacker
thalacker

Reputation: 2837

In addition to Felix's answer, 

href={`/posts/${posts.id}`}

would work well too. This is nice because it's all in one string.

Upvotes: 12

KHACHORNCHIT
KHACHORNCHIT

Reputation: 2330

Could you please try this ?

Create another item in post such as post.link then assign the link to it before send post to the render function.

post.link = '/posts/+ id.toString();

So, the above render function should be following instead.

return <li key={post.id}><a href={post.link}>{post.title}</a></li>

Upvotes: 1

Nath
Nath

Reputation: 6864

You can use ES6 backtick syntax too

<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>

More info on es6 template literals

Upvotes: 107

Felix Kling
Felix Kling

Reputation: 817238

Use string concatenation:

href={'/posts/' + post.id}

The JSX syntax allows either to use strings or expressions ({...}) as values. You cannot mix both. Inside an expression you can, as the name suggests, use any JavaScript expression to compute the value.

Upvotes: 278

Related Questions