This question already has answers here:
Destructuring of es6 but passing dynamic variable
(2 answers)
Closed 2 years ago.
I am using Context API to pass items from one component to another. I am destructuring items as one would do:
const { smallPrice, bigPrice } = useContext(Context)
I wondered if it would be possible to destructure them with interpolated strings, so that I can use the props.id from the component.
const { `smallPrice${props.id}`, `bigPrice${props.id}` } = useContext(Context)
This won't work however. Are there any alternatives to destructure things coming from context with interpolated strings?
You can do this by using destructuring assignment. You reference the variable by a key and assign it to a known variable name. Example:
const {
[`smallPrice${props.id}`]: smallPrices,
[`bigPrice${props.id}`]: bigPrices
} = useContext(Context);
console.log(smallPrices);
console.log(bigPrices);
Related
This question already has answers here:
Destructuring and rename property
(2 answers)
Closed 5 months ago.
In Javascaript, I publicly assigned the variable A. I now want to assign A to a destructured variable. But all I can think of is:
const {variable} = getVariable();
A = variable;
How can I make this into a one-liner?
You can write
({variable: A} = getVariable());
if you insist on using destructuring to assign a previously declared variable, but really there's no good reason to use destructuring here. Normal property access is so much simpler, shorter, and more readable:
A = getVariable().variable;
You can do this
const {variable:A} = getVariable();
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
What is destructuring assignment and its uses?
(3 answers)
Closed 3 years ago.
I know how to declare const variable like const a = 1;
but I dont get what is this
const { app, BrowserWindow } = require('electron')
can anyone explain me?
That’s a destructuring assignment.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
It lets you make shortcuts to members of an array or structure.
This question already has answers here:
Square Brackets Javascript Object Key
(5 answers)
Accessing an object property with a dynamically-computed name
(19 answers)
JavaScript property access: dot notation vs. brackets?
(17 answers)
react setState with dynamic key
(1 answer)
Closed 4 years ago.
I'm reading through how to create login forms & came across this method:
handleChange(e) {
this.setState({ [e.target.name] : e.target.value });
}
Not too sure what's going on in the setState portion of it. The array brackets are throwing me off for some reason. Can anyone elaborate on what this method is doing?
[someExpression] is called a computed property name and is an alternative to writing this:
handleChange(e) {
const stateUpdate = {};
stateUpdate[e.target.name] = e.target.value;
this.setState(stateUpdate);
}
That's new(ish) JavaScript syntax that allows an object literal to compute a property name from an expression. It's effectively the same as:
handleChange(e) {
var state = {};
state[e.target.name] = e.target.value;
this.setState(state);
}
In this case the expression that determines the property name is e.target.name.
Assume you have form with inputs named email and password. You have state variables with same name ‘email’ and ‘password’. Now you have this function handleChange attached for onChange event of input.
When it is called for email, it will set state.email to input value similarly for other fields.
This is a new syntax where you can assign objects key in this way.
This question already has answers here:
Multiple assignment in JavaScript? What does `[ a, b, c ] = [ 1, 2, 3 ]` mean?
(4 answers)
Closed 5 years ago.
Take the following line of code
const [component] = router.getMatchedComponents({ ...to })
Could anyone advise what the square brackets around component means here? I have tried to google this but struggling to find an answer
It's called Destructuring assignment, and it's used to unpack the values of an array and assign them to new variables.
So here in your code:
const [component] = router.getMatchedComponents({ ...to })
You are assigning to the component variable the first element held in the array that will be returned by router.getMatchedComponents({...to}), where to is an array-like structure turned into object using the spread operation.
This question already has answers here:
Multiple assignment in JavaScript? What does `[ a, b, c ] = [ 1, 2, 3 ]` mean?
(4 answers)
Closed 5 years ago.
Take the following line of code
const [component] = router.getMatchedComponents({ ...to })
Could anyone advise what the square brackets around component means here? I have tried to google this but struggling to find an answer
It's called Destructuring assignment, and it's used to unpack the values of an array and assign them to new variables.
So here in your code:
const [component] = router.getMatchedComponents({ ...to })
You are assigning to the component variable the first element held in the array that will be returned by router.getMatchedComponents({...to}), where to is an array-like structure turned into object using the spread operation.