Develop Reference

React putting props as variables in javascript template literals

I'm trying to pass a react props into a javascript template literal:
function Yuh(props) {
return <a href={`javascript:console.log(${props.i})`}>{props.i} <h2>a</h2></a>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Yuh i='lmao' />);
But I'm getting this error:
Uncaught ReferenceError: lmao is not defined
I tried to replace i='lmao' with i={5} and that seems to work. How do I make it so that strings also work?
Thanks!

lamo is string but 5 is number you need wrap lamo with quote or double quotation :
function Yuh(props) {
return <a href={`javascript:console.log("${props.i}")`}>{props.i} <h2>a</h2></a>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Yuh i='lmao' />);
if you dont wrap, browser think lamo is a variable , not a string :
i change here :
href={`javascript:console.log("${props.i}")`}

why do we use curly braces while defining constant variable in react js?

i write this following code to fetch the title from props .
Before:
export default function Articleinfo(props) {
const {edge} = props.data.allNodeArticle;
return(
<>
<div>
<h1>Title:{edge[0].title}</h1>
<h2>info:</h2>
</div>
</>
);
};
i getting this error : Cannot read properties of undefined (reading '0')
But After : When i remove the curly braces it worked
export default function Articleinfo(props) {
const edge = props.data.allNodeArticle;
console.log(edge.nodes[0].title);
const Title = edge.nodes[0].title;
return(
<>
<div>
<h1>Title:{edge.nodes[0].title}</h1>
<h2>info:</h2>
</div>
</>
);
};
Can some explain me why this happen? what is the concept behind it?

Curly braces are used for Object destructuring
In the link below syntax for object destructing is explained
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring
So when you do
const {edge} = props.data.allNodeArticle;
this means that the object allNodeArticle has a key named edge and you are accessing it
But when you do the followinng and error goes it means allNodeArticle is not an object having a key edge instead it has array nodes it.
const edge = props.data.allNodeArticle;
console.log(edge.nodes[0].title);

Getting "SyntaxError: Unexpected token" in Observable

I was trying vega-lite-api on observablehq here.
This is my code:
Putting these two in different cells work:
obj = vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'));
In next cell:
obj.render()
If I put both in the same cell, it gives SyntaxError: Unexpected token:
obj2 = vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'));
obj2.render();
^
Why is this so?

If you want to put the code into the same cell, you can either chain the call to render like so:
vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'))
.render()
Or you can use a block cell with curly braces like so:
{
const obj = vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'));
return obj.render();
}
For more on Observable JavaScript:
https://observablehq.com/#observablehq/observables-not-javascript

for obj you have a definition before you use it...
obj = N {
Symbol(data): Object {mark: h, data: Object, encoding: h}
<prototype>: N {}
}
I guess you forgot about it for obj2?

Cannot read property 'map' of undefined reactjs when i have declared the property already

Hi I am running the following , I have set textfield property to a string and as far as I know thats an array and map functions should work on arrays but it still says Cannot read property 'map' of undefined, well Is it not defined in there in the state? Thanks
class App extends Component {
state={
textfield:"first value",
}
makeUnique =(textfield)=>{
return String.prototype.concat(...new Set(textfield) );
}
textchanged = (event)=>{
this.setState({
textfield:event.target.value,
caltexlength:event.target.value.length,
})
}
render() {
let uniquechars=null;
uniquechars=(<div>
{
this.textfield.map((char,index)=>{
return <charComponent
char ={this.makeUnique(this.state.textfield)}/>
})
}
</div>)## Heading ##

Write the line this.textfield.map((char,index) as below.
[...this.state.textfield].map((char,index)
With the spread operator you will create an array from your string and you can call map on it.

TextField is a string so why are you doing map on it. Map works only on arrays. To access state TextField it should be this.state.textField but not this.textField
So change
uniquechars=(<div>
{
this.textfield.map((char,index)=>{
return <charComponent
char ={this.makeUnique(this.state.textfield)}/>
})
}
</div>)
To
uniquechars=(<div>
<charComponent
char ={this.makeUnique(this.state.textfield)}/>
</div>)

You have to replace
this.textfield.map
to
this.state.textfield.split('').map

Transform array into newline separated string using map.reduce?

I think it should be possible to use map.reduce to transform an array into newline separated string. But for some reason it is not working. What am I doing wrong
copyLicenseCodesToClipboard = () => {
// tslint:disable-next-line:no-any
const licenseCodes = this.props.generateLicenseCodes.reduce((accumulator: any, element: LicenseCode) =>
accumulator.concat(element.code).concat('\n')
);
copyToClipboard(JSON.stringify(licenseCodes));
}
Uncaught TypeError: accumulator.concat is not a function

You can also use map and join, which seems to be more intuitive in this case.
const licenseCodes = this.props.generateLicenseCodes.map((element)=>{return element.code;}).join("\n");