更新特定对象中的特定属性

Question

I just get little stuck on quite simple task. Apologise in advance if this question is already answered. I just can not find it. I got objects in state

    state = {
    controls: {
        email: {
            elementConfig: {
                type: 'email'
            },
            placeholder: 'Email Address',
            value: '',
            validation: {
                required: true,
                isEmail: true
            },
            valid: false,
            touched: false,
            errorMsg: ""
        },
        password: {
            elementConfig: {
                type: 'password'
            },
            placeholder: 'Password',
            value: '',
            validation: {
                required: true,
                minLength: 6
            },
            valid: false,
            touched: false,
            errorMsg: ""
        }
    },
};

and I need to update "touched" to true and "errorMsg" to a text only if "valid" in the object equal to false

I managed to filter all object keys with "valid" value equal to false

const invalidInputs = Object.keys(this.state.controls).filter(key => {
        return this.state.controls[key].valid === false
      })

Now I need to loop through each "invalidInputs" and update touched to true and "errorMsg" to a specific text. I have tried

  for (let key in invalidInputs){
        const updatedControl = {
            ...this.state.controls,
            [invalidInputs[key]]: {
                ...this.state.controls[invalidInputs[key]],
                touched: true,
                errorMsg: errorMsg(this.state.controls[invalidInputs[key]].validation, this.state.controls[invalidInputs[key]].value)
            }
        };
        this.setState({controls:updatedControl})
        console.log(updatedControl)
      }

but that doesn't work obviously. Can anyone give me some nice solution or direct me to an answer?

Thanks in advance

Answer 1

Use for..in to loop through the object and check the value of valid

 let state = { controls: { email: { elementConfig: { type: 'email' }, placeholder: 'Email Address', value: '', validation: { required: true, isEmail: true }, valid: false, touched: false, errorMsg: "" }, password: { elementConfig: { type: 'password' }, placeholder: 'Password', value: '', validation: { required: true, minLength: 6 }, valid: false, touched: false, errorMsg: "" } }, }; for (let keys in state.controls) { if (!state.controls[keys].valid) { state.controls[keys].errorMsg = 'New Msg'; state.controls[keys].touched = true; } } console.log(state) 

Answer 2

You can use map() and change the object according to needs instead of using filter() .

 let state = { controls: { email: { elementConfig: { type: 'email' }, placeholder: 'Email Address', value: '', validation: { required: true, isEmail: true }, valid: false, touched: false, errorMsg: "" }, password: { elementConfig: { type: 'password' }, placeholder: 'Password', value: '', validation: { required: true, minLength: 6 }, valid: false, touched: false, errorMsg: "" } }, }; let result = Object.keys(state.controls) .map((con) => (!state.controls[con].valid ? ({...state.controls[con],errorMsg:"New msg",touched:true}) : ({...state.controls[con],touched:true}))) console.log(result); 

Answer 3

I just wanted to post a solution which works for me which is the same as the first solution but without mutating state

const updatedControls = { ...this.state.controls }

    for (let keys in updatedControls) {
        if (updatedControls[keys].valid === false) {
            const control = updatedControls[keys]
            control.errorMsg = "new msg"
            control.touched = true

            updatedControls[keys] = control
        }
    }
    this.setState({ controls: updatedControls })