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.
Related
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);
This question already has answers here:
JavaScript property access: dot notation vs. brackets?
(17 answers)
Closed 3 years ago.
Let's say we need to add a property to an existing js object
var billingData = {}
In my case, I want to store input value in the js object
Here's the basic input
<input type="text" class="form-control" id="billingFullName">
We, basically, have two ways to add the property to the js object:
The first one:
billingData["billingFullName"] = document.getElementById('billingFullName').value
And the second one:
billingData.billingFullName = document.getElementById('billingFullName').value
What's the difference between them?
I'm asking, because when I was submitting the js object using AJAX to MVC Controller, where properties where added using the [] notation, the model in the Controller appeared to be null. Whereas, the dot notation appeared to solve the issue and I'm wondering why..
Typically you use bracket notation when you need to define a property dynamically such as with a variable or if the key is not in proper format for dot notation:
const obj = {}
const someKey = 'key'
obj[someKey] = 'somevalue'
console.log(obj.key) // 'somevalue'
console.log(obj.someKey) // undefined
Dot notation is when you already know the key:
const obj = {}
object.key = 'someValue'
This question already has answers here:
How to use a variable for a key in a JavaScript object literal?
(16 answers)
react setState with dynamic key
(1 answer)
Reactjs setState() with a dynamic key name?
(13 answers)
Closed 4 years ago.
I am trying to set variable in this.state
My variable is defined as VariableName+"Error"
This code works well, but it isnt good to mutate state directly:
this.state[VariableName+"Error"] = "";
My bad try to mutate state in this.state which does not work:
this.setState({
VariableNameError: ""
})
This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 7 years ago.
I have a popup form and need to return a value to the master form. The first statement works fine, but when I try to put the field name (textAlert) to a variable, I cannot get it to work. I tried all kinds of syntax.
Please help. Thanks.
function DoReturnValue()
{
opener.MasterForm.textAlert.value = "Hello"; // WORKS
/* DOES NOT WORK
var theField = "textAlert";
opener.MasterForm(theField).value = "Haloha";
opener.document.MasterForm.getElementById(theField).value = "Haloha";
*/
}
To access properties dynamically with a string variable as a name, use square-bracket notation:
opener.MasterForm[theField].value = "Haloha";
This question already has answers here:
Add a property to a JavaScript object using a variable as the name? [duplicate]
(14 answers)
Closed 9 years ago.
In JavaScript I am trying to update an object value through a function, through which I am passing the object property to update.
However, this won't work - and I can see why, but don't know how to combat it!
myObject = {"testItem": "testValue"};
console.log(myObject.testItem);
function updateSomeValue(objectItem, newValue){
myObject.objectItem = newValue;
}
updateSomeValue('testItem', 'newValue');
console.log(myObject.testItem);
Now, I can see the issue here is that in the function, myObject.objectItem is expecting an item in the object called objectItem - it won't translate it to testItem.
How do I do this?
By using a different notation. Using [ .. ] you can specify the property name as a string.
function updateSomeValue(objectItem, newValue){
myObject[objectItem] = newValue;
}