How to create dynamic href in react render function

Question

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            lt ul gt                                this props posts map function post                       return  lt li key  post id  gt  lt a href   posts   post id  gt  post title  lt  a gt  lt  li gt                                            lt  ul gt           How do I do it so that each post has href s of  posts 1   posts 2 etc

User · Answer

You can use ES6 backtick syntax too   lt a href    customer   item  id     gt  item get  firstName     item get  lastName    lt  a gt    More info on es6 template literals

User · Answer

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  lt li key  post id  gt  lt a href  post link  gt  post title  lt  a gt  lt  li gt

User · Answer

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

User · Answer

In addition to Felix s answer    href    posts   posts id      would work well too  This is nice because it s all in one string

[javascript] How to create dynamic href in react render function?

Examples related to javascript

Examples related to reactjs