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, 2020 in Java-Script by kartik
• 37,530 points
5,833 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!!

To know more about React, We highly recommend to join React JS Certification course today.

Thanks!!

answered May 18, 2020 by Niroj
• 82,880 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, 2020 in Java-Script by Niroj
• 82,880 points
6,549 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, 2020 in Java-Script by Niroj
• 82,880 points
184 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, 2020 in Java-Script by Niroj
• 82,880 points
254 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, 2020 in Java-Script by Niroj
• 82,880 points
3,336 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, 2020 in Laravel by Niroj
• 82,880 points
554 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, 2020 in Laravel by Niroj
• 82,880 points
457 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, 2020 in Laravel by Niroj
• 82,880 points
244 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, 2020 in Laravel by Niroj
• 82,880 points
244 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, 2020 in Java-Script by Niroj
• 82,880 points
7,941 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, 2020 in Java-Script by Niroj
• 82,880 points
1,248 views