Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state:


and the following HTML attributes on a tag:


Is there a way I can add the id state to the HTML attribute to get something like this:

href={"#demo + {}"}

Which will yield:


Solution 1

You're almost correct, just misplaced a few quotes. Wrapping the whole thing in regular quotes will literally give you the string #demo + {} - you need to indicate which are variables and which are string literals. Since anything inside {} is an inline JSX expression, you can do:

href={"#demo" +}

This will use the string literal #demo and concatenate it to the value of This can then be applied to all strings. Consider this:

var text = "world";

And this:

{"Hello " + text + " Andrew"}

This will yield:

Hello world Andrew 

You can also use ES6 string interpolation/template literals with ` (backticks) and ${expr} (interpolated expression), which is closer to what you seem to be trying to do:


This will basically substitute the value of, concatenating it to #demo. It is equivalent to doing: "#demo" +

Solution 2

the best way to concat props/variables:

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test

Solution 3

If u want to do it in JSX

<button className={`tab__btn first ${props.state}`} >

Solution 4

you can simply do this..

 <img src={"" + this.props.url +"/1.jpg"}/>

Solution 5

for Concatenating variables and strings in React with map , for exmple :

{, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}