Why do we use square brackets in setState({ [name]: value})

Question

There is my code:

import { useState } from "react";


function Form(){
    const [inputs, setInputs] = useState({});

    const handleChange = e =>{
        const name = e.target.name;
        const value = e.target.value;
        setInputs(values=>({...values, [name]:value}));

    }

    const handleSubmit = (e)=>{
        e.preventDefault();
        console.log(inputs.name, inputs.profession, inputs.age);
    }

    return(
        <>
            <div className="d-flex justify-content-center mt-4">
                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="name">Ad Soyad</label>
                        <input name="name" id="name" className="form-control" required value={inputs.name || ""} onChange={handleChange}/>
                    </div>
                    <div className="form-group mt-2">
                        <label htmlFor="profession">Meslek</label>
                        <select className="form-control" value={inputs.profession || ""} onChange={handleChange}>
                            <option>Seçim yapınız...</option>
                        </select>
                    </div>
                    <div className="form-group mt-2">
                        <label htmlFor="age">Yaş</label>
                        <input name="age" id="age" className="form-control" min="18" required value={inputs.age || ""} onChange={handleChange}></input>
                    </div>
                    <div className="form-group mt-2">
                        <button type="submit" className="btn btn-outline-primary w-100">Kaydet</button>
                    </div>
                </form>
            </div>
        </>
        );

}

export default Form;

And I have a question about this part of code:

    const handleChange = e =>{
        const name = e.target.name;
        const value = e.target.value;
        setInputs(values=>({...values, [name]:value}));

    }

in here, there is a setInputs() and,

setInputs(values=>({...values, [name]:value}));

Why do we wrap name with square brackets? I searched from internet and they say, "name is a dynamic variable so that we use square brackets. Dynamic variable means the variable value changes.". When I read this, another question came to my mind that Why don't we use square brackets with value(setInput()'s value)? Because this value changes every time when we typed to input areas. Because value represent this changes in input areas. So, value should be dynamic variable. If it is, why dont we wrap value with square brackets? Did I understand everything wrong? I need help.

To sum up, I have two questions: 1-Why do we wrap name with square brackets? 2-Why don't we wrap value with square brackets?

Thank you.

I need to get answers to my questions

Does this answer your question? [Is it possible to add dynamically named properties to JavaScript object?](https://stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object) — evolutionxbox, Jun 28 '23 at 12:22
@evolutionbox got it. this answer https://stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object#answer-35579786 — roberto tomás, Jun 28 '23 at 12:23

score 3 · Accepted Answer · answered Jun 28 '23 at 12:27

The reason for the bracket is as you pointed out, because we want to use the value of the variable as the name of the property.

const name = "test";
const obj1 = {[name]:'obj1'}; // Exactly like writing {test:'obj1'}
const obj2 = {name:'obj2'};

In this example, obj1 will be an object with key "test" of value "obj1" while obj2 will have key name of value "obj2".

Another way to look into it is by using property accessor, maybe it will look clearer:

const obj3 = {}; // Initialize empty object.
const name = "test";
obj3[name] = 'obj3'; // Will provide property 'test' with value "obj3"
obj3.name = "obj3"; // Will provide property 'name' with value "obj3"

score -1 · Answer 2 · answered Jun 28 '23 at 12:30

The variable in a bracket is a key of an object. For short, they are just the same thing with just a key (without bracket). However, you might sometimes encounter to dynamically access an object value, then you will need to use bracket method. In rare instances, there are keys that are in kebab case (foo-bar), then you can't access a value of an object by obj.foo-bar but instead you will must use obj["foo-bar"].

const obj = {baz: "hello", "foo-bar": "hi"};

console.log(obj.baz); // is same with
console.log(obj["baz"]);

// console.log(obj.foo-bar) // will not work
console.log(obj["foo-bar"]);

Why do we use square brackets in setState({ [name]: value})

2 Answers2