How to create dynamic href in react render function?

0 votes

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?

May 18 in Java-Script by kartik
• 27,360 points
1,033 views

1 answer to this question.

0 votes

Hello @kartik,

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.

Hope it works!!

answered May 18 by Niroj
• 58,960 points

Related Questions In Java-Script

0 votes
1 answer

How to use Redirect in the new react-router-dom of Reactjs?

Hello, To navigate to another component you can ...READ MORE

answered May 18 in Java-Script by Niroj
• 58,960 points
1,651 views
0 votes
1 answer

How to access PHP session variables from jQuery function in a .js file?

Hello @kartik, You can produce the javascript file ...READ MORE

answered Jul 7 in Java-Script by Niroj
• 58,960 points
72 views
0 votes
1 answer

How to pass an array as a function parameter in JavaScript?

Hello @kartik, Use: const args = ['p0', 'p1', 'p2']; call_me.apply(this, ...READ MORE

answered Sep 4 in Java-Script by Niroj
• 58,960 points
41 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28 in Java-Script by Niroj
• 58,960 points
579 views
0 votes
1 answer

What is Laravel framework? Why one should use Laravel?

Laravel is a PHP web-framework; it utilized ...READ MORE

answered Mar 17 in Laravel by Niroj
• 58,960 points
175 views
0 votes
1 answer

How to download and install Lavavel framework?

Hey @kartik, First you must have xampp install ...READ MORE

answered Mar 17 in Laravel by Niroj
• 58,960 points
173 views
0 votes
1 answer

Display Laravel in browser by using cmd promt?

Hello, First you need to have laravel install ...READ MORE

answered Mar 17 in Laravel by Niroj
• 58,960 points
67 views
0 votes
1 answer

How can we get started with Laravel through Xampp?

Hii, First you need to start Apache and ...READ MORE

answered Mar 17 in Laravel by Niroj
• 58,960 points
74 views
0 votes
1 answer

How to access PHP session variables from jQuery function in a .js file?

Hello, You can produce the javascript file via ...READ MORE

answered Apr 29 in Java-Script by Niroj
• 58,960 points
2,029 views
0 votes
1 answer

How to do API call in react js?

Hello, Use fetch method inside componentDidMount to update state: componentDidMount(){ fetch('https://dey.me/api/') ...READ MORE

answered May 18 in Java-Script by Niroj
• 58,960 points
152 views