How to create a dynamic href function in a render reaction?

Question

I am making a list of posts. For each message, I would like to make the anchor tag the message identifier as part of the href line.

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 to do this so that each post has href from /posts/1 , /posts/2 , etc.?

Answer 1

Use string concatenation:

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

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

Answer 2

You can also use ES6 backlink syntax

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

Learn more about es6 template templates.

Answer 3

Could you try it?

Create another element in the message, for example post.link , then assign a link to it before sending post to the rendering function.

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

So, instead, the following rendering function should be performed.

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

Answer 4

In addition to Felix’s answer,

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

also suitable. This is good because it is all on one line.