Why square brackets used while creating dynamic state

Question

I was following a tutorial and it used square brackets for updating the state in changeHandler function for [e.target.name]. Why do we have to use square brackets with e.target.name which is just a key of the state object. I tried using the e.target.name without square brackets but it's showing me an error. Why is that so can someone please explain?

constructor(props) {
        super(props)

        this.state = {
            userid: " ",
            title: " ",
            body: " "

        }
    }

    changeHandler = (e) => {
     this.setState({ [e.target.name]: e.target.value })  // why we have used [ ] with e.target.name
        console.log(this.state)
        console.log([e.target.name])
    }

 

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <label>UserId</label>
                        <input type="text" value={this.state.userid} name="userid" onChange={this.changeHandler}></input>
                    </div>

                    <div>
                        <label>Title</label>
                        <input type="text" value={this.state.title} name="title" onChange={this.changeHandler}></input>
                    </div>

                    <div>
                        <label>body</label>
                        <input type="text" value={this.state.body} name="body" onChange={this.changeHandler}></input>
                    </div>
<button type='submit'>Submit</button>
                </form>
            </div>
        )
    }
}

If I am not wrong in order to create an object (key, value) where the key is dynamic (another variable) you must use it into brackets — Franco Berardi, Jun 11 '22 at 17:25

score 0 · Answer 1 · answered Jun 11 '22 at 17:41

0

Inside a object literal, when square brackets are used as a key, it tells javascript that the key is the value of the variable inside the brackets.

Ex.:

const key = 'name';

const person = {
  [key] = "John"
}

// Since key is a variable inside squared brackets, 
// javascript will evaluate its value as the key

// Therefore, the `person` object becomes:

{
  'name': 'John'
}

answered Jun 11 '22 at 17:41

JesseSousa

25
2
4

what is this concept known as ? does it have any name ? – Jun 11 '22 at 17:45
1

Computed properties is the concept. Check the following link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names – Franco Berardi Jun 11 '22 at 18:00

score -1 · Answer 2 · answered Jun 11 '22 at 18:11

-1

The square bracket is used to get the name of the event target and set the value to the state.

answered Jun 11 '22 at 18:11

Mohammad Ali

301
1
11

Why square brackets used while creating dynamic state

2 Answers2