Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state:
{this.state.id}
and the following HTML attributes on a tag:
href="#demo1"
id="demo1"
Is there a way I can add the id state to the HTML attribute to get something like this:
href={"#demo + {this.state.id}"}
Which will yield:
#demo1
This question is related to
javascript
html
reactjs
ecmascript-6
You're almost correct, just misplaced a few quotes. Wrapping the whole thing in regular quotes will literally give you the string #demo + {this.state.id} - 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.state.id}
This will use the string literal #demo and concatenate it to the value of this.state.id. 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:
href={`#demo${this.state.id}`}
This will basically substitute the value of this.state.id, concatenating it to #demo. It is equivalent to doing: "#demo" + this.state.id.
the best way to concat props/variables:
var sample = "test";
var result = `this is just a ${sample}`;
//this is just a test
exampleData=
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}
];
example1=
const finalData1 = json1.concat(json2).reduce(function (index, obj) {
index[obj.id] = Object.assign({}, obj, index[obj.id]);
return index;
}, []).filter(function (res, obj) {
return obj;
});
example2=
let hashData = new Map();
json1.concat(json2).forEach(function (obj) {
hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
});
const finalData2 = Array.from(hashData.values());
I recommend second example , it is faster.
you can simply do this..
<img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>
Source: Stackoverflow.com