This question already has answers here:
How to destructure object properties with key names that are invalid variable names?
(3 answers)
Closed 3 years ago.
While using material ui, I realized they have a prop called in in the transitions components, but when trying to destruct the props, I can't because in is a reserved key word.
const MyFade = ({ children, in, ...otherProps }) => { // this gives me an error
return (
<div {...otherProps}>
<Fade in={in}>{children}</Fade>
</div>
);
};
How can I do this? I need to destruct in and have otherProps to spread in the div.
Just assign a new, not reserved name inside destructuring.
const o = {
in: 'foo',
out: 'boo',
};
const { in: inProp } = o;
// ^^^^ assign new name
console.log(inProp);
Related
This question already has answers here:
What does this symbol mean in JavaScript?
(1 answer)
What do square brackets around a property name in an object literal mean?
(2 answers)
Closed 2 months ago.
const handleChange = (event) => {
const { name, value } = event.target;
Here is [name] that is inside the square bracket. I know what it's doing but I just want to know what was the logic under the hood to use this logic?
setFormFields({ ...formFields, [name]: value });
console.log(formFields);
};
If it's array destructuring why and how is it working and why not object destructuring and what is the reason behind using this logic?
In your first example, const { name, value } = event.target; is object destructuring, pulling the name and value properties off of event.target;
While your second example looks the same, it's the opposite - instead of destructuring an object into variables you're creating a new object. Somewhere above that line, there's a variable called name.
You can think of the example like this:
const name = 'someKey';
const value = 'someValue';
const formFields = { keyOne: 'one' };
const newObject = { ...formFields, [name]: value }; // { keyOne: 'one', someKey: 'someValue' };
This question already has answers here:
Destructuring with nested objects and default values
(3 answers)
JS/ES6: Destructuring of undefined
(8 answers)
Closed 10 months ago.
I have a function that returns an object like the following:
{
data: {key1: value1, ...},
errors: [...]
}
I can extract key1 with the following:
const { data: { key1 }} = myFunction()
However, sometimes data is undefined which causes the destructuring to fail.
I've looked at the destructuring examples and haven't been able to figure out how to pull out key1 when data might be undefined.
Is there a way to assign a default value of {} to data when performing the destructuring so that it doesn't fail?
You could take a default object.
const
myFunction = () => ({}),
{ data: { key1 } = {} } = myFunction();
console.log(key1);
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Syntax: const {} = variableName, can anyone explain or point me into the right direction [duplicate]
(1 answer)
Closed 3 years ago.
handleChange(event) {
const {name, value} = event.target
this.setState({
[name]: value
})
}
this is a method that notes for change in state of a react component. takes event as parameter and does something and changes state.
This method is called destructuring, which is used to save some few lines.
The following example will show you the usage of destructuring.
let person = {
name: 'David',
age: 15,
job: 'Programmer'
}
const { name, age } = person; // Takes the property/method from the object
console.log(name); // Prints 'David'
console.log(age); // Prints '15'
Without using destructuring, I would have done this:
const name = person.name;
const age = person.age;
Which needed more lines.
You can read more about destructuring here.
event.target means element where you pass the function, and { name } this technique is called destructing it is same as const name = event.target.name
for example if you pass handleChange to some input event.target is input where you passed handleChange function
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
children prop in React component
(3 answers)
beginner's: const definition in Redux confusing
(1 answer)
Closed 5 years ago.
I am new to react js. I am working on a project and found this line
const { var1, var2 } = this.props;
Props which are comming in this component are
type PropsType = {
var1: Array<any>,
a: Array<any>,
b: boolean,
c: boolean,
var2: (string) => void,
d: () => void,
e: () => void
};
I am confused. What it means?
const { var1, var2 } = this.props;
// the same as
// const var1 = this.props.var1;
// const var2 = this.props.var2;
Have you tried to read the docs ?
Well redundant information, but a revision for me. :)
Anyways to start with, this is destructuring object assignment. What this means is that, this is a shorthand way to get the object properties' value from an object(such as this.props in here).
So when you want to extract a property named 'var1' and 'var2' from the 'this.props', by writing the instruction -
const { var1, var2 } = this.props;
you ask for the property named 'var1' and 'var2' from 'this.props' to be stored in constants 'var1' and 'var2'. All other properties are simply ignored. And if any of the asked property names are not there, they are simply given 'unassigned' value.
After this, you may consider going through more details(magic of it!) here -
MDN - object_destructuring
This is not directly related to React nor Redux. It is ES6 Object Destructuring assignment.
It means that you're assigning this.props.var1 and this.props.var2 to consts var1 and var2 respectively.
This question already has answers here:
How to use a variable for a key in a JavaScript object literal?
(16 answers)
Closed 6 years ago.
Is there a short form of doing such operation:
function doObject(key, value){
let object = {};
return object[key] = value;
}
UPD: forget about function, I use it just to isolate scope and provide to params key and value. I don't need to implement the function but logic that it does
const doObject = (key, value) => ({[key]: value});
// ^^^^^^^^^^^^ ^ ^^^^^
// 1 2 3
Arrow function syntax
Wrapping with braces allows you to return an object literal without the extended syntax. (Otherwise, it thinks the {} are the block delimiters.
Computed object literal property key.
You can use a computed property name for the object:
function doObject(key, value){
return {
[key]: value
};
}