CODEWITHSUNDEEP
javascriptreactjs
Flupper
Flupper

Reputation: 321

dot Notation vs bracket notation with Reactjs

I have a change Handler for a form and Form elements in the form of state, the issue is when pressing on the div of the form of more element input is created, please check the following changeHandler.

the State:

const [InputState,setInputstate]=useState(
    {
        controls: {
            email: {
                elementType:'input',
                elementConfig:{
                    type:'email',
                    placeholder:'Enter Your Email'
                },
                value:''
            },
            password: {
                elementType:'input',
                elementConfig:{
                    type:'password',
                    placeholder:'Enter Your password'
                },
                value:''
            },

        }})

The changeHandler:

const ChangeHandler=(event,ele)=>{
    const new_controls = {...InputState.controls}
    const new_ele_config = {...new_controls[ele]}
    new_ele_config.value = event.target.value
    new_controls[ele] = new_ele_config
    setInputstate({controls: new_controls})
}

The following is to transform the object into an Array to return Input component:

let FormElements = []
for (let ele in InputState.controls){
    FormElements.push({
        ele:ele,
        config:InputState.controls[ele]
    })
}
let Form =null
Form =FormElements.map((ele,index)=>(
    <Input key={index}
        changed={(event)=>ChangeHandler(event,ele.ele)}
        elementconfig={ele.config.elementConfig}/>
))

After debugging, I discovered that instead of calling the object element in the format of bracket notation I called it with dot notation:

const new_ele_config = {...new_controls[ele]} 
const new_ele_config = {...new_controls.ele}

Any explanation??

Upvotes: 0

Views: 753

Answers (1)

Zimri Leijen
Zimri Leijen

Reputation: 489

This isn't specific to React, this is just a javascript question.

and these: 

const new_ele_config = {...new_controls[ele]} 
const new_ele_config = {...new_controls.ele}

are NOT the same thing.

const new_ele_config = {...new_controls['ele']} would be the same as
const new_ele_config = {...new_controls.ele}

Because bracket notation allows for dynamic references, so ele without quotes is seen as a variable, while with dot notation it's always seen as a string.

For the same reason you can't do Array.0 instead of Array[0]

Upvotes: 2

Related Questions