Concatenating variables and strings in React

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:




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" +


the best way to concat props/variables:

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


        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}


        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[] = Object.assign({}, obj, index[]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;


        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(, Object.assign(hashData.get( || {}, obj))

        const finalData2 = Array.from(hashData.values());

I recommend second example , it is faster.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.