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>
        )
    }
}

```