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?
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.
You can use ES6 backtick syntax too
<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>
In addition to Felix's answer,
href={`/posts/${posts.id}`}
would work well too. This is nice because it's all in one string.
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>
