I recently followed a react tutorial to create a template project and have since been modifying code to fit my needs. In particular, there was this piece of code on a component that was passed a parameter called label
.
render() {
const { label } = this.props;
...
}
In this example, I returned a JSON object from a controller and passed it to this component using a parameter named rune
. A property of the rune
JSON is "name", and I wanted to assign the name to a variable called `label. One thing that gave me trouble was the following:
render() {
console.log("Prop.runes.name: " + this.props.rune.name);
const { label } = this.props.rune.name;
console.log("Label: " + label);
...
}
The first console.log(...)
outputs the name correctly. However, the second log was undefined. After some trial and error, I found that if I removed the curly braces from my const
declaration the name resolved properly.
render() {
const label = this.props.rune.name;
...
}
What were the curly braces originally doing? Is there a reason the tutorial initially had them?
What you ask here is not related to React actually, it is related to Javascript: Destructuring assignment.
For objects, you can destruct a property like that:
const obj = { name: "foo", }; const { name } = obj; console.log( name ); const name2 = obj.name; console.log( name2 );
Above, both assignments are equal. First one is the shorthand of the second one.
For your example:
const { label } = this.props.rune.name;
Here, there is a this.props.rune.name.label
property and you are destructing it from this.props.rune.name
. This is equal to:
const label = this.props.rune.name.label;
not actually
const label = this.props.rune.name;
as you tried.
The related part of React with this syntax is we see it very frequently in React world. Like:
render() {
const { foo, bar } = this.props;
const { fizz, buzz } = this.state;
return (
<p>A {foo} goes to {bar} and orders a {fizz} without {buzz}</p>;
)
}
or
const AComponent = ( { foo, bar } ) => (
<p>{foo} loves {bar} in programming world.</p>
);
A caution. When dealing with nested properties to destruct being careful is important. Since as @Tyler Sebastian explained in the comments it is not null
safe.
const data = { obj: { name : "foo"} };
const { obj: { name } } = data;
This is OK but if we have a typo there or if we try to use a property which does not exist at that time we get an error
since we try to destruct a property from an undefined
one.
const data = { obj: { name : "foo"} };
const { objx: { name } } = data;
This throws an error. Thanks to @Tyler Sebastian for the comment.
Try with this code
render() {
console.log("Prop.runes.name: " + this.props.rune.name);
const label = this.props.rune.name.label;
console.log("Label: " + label);
...
}
You need to declare the variable label without the { }
The curly braces are for Destructuring
You can check here
let {x} = {a: 10, b: 20, c: 30, d: 40}
console.log(x) // undefined
let {b} = {a: 10, b: 20, c: 30, d: 40}
console.log(b) // 10
console.log(c) // Error: c is not defined
Essentially, const { label } = this.props;
is undefined because the object this.props
does not have the label
property, hence it is unable to match it, as per my x
example, but in the b
example it does match a property, hence it assigned correctly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.