Menu
To create dynamic href in React component, we can use template strings. <a href={`/customer/${item. _id}`}> {item. get("firstName")} {item.
getElementById('someDiv'); // create <a> tag var tag = document. createElement(a); // set the href attribute tag. setAttribute('href', exampleHref); // append the node to the parent div. appendChild(tag);
To add the link in the menu, use the <NavLink /> component by react-router-dom . The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active.
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>
More info on es6 template literals
In addition to Felix's answer,
href={`/posts/${posts.id}`}
would work well too. This is nice because it's all in one string.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With