Skip to content
Advertisement

How to filter array of object value and update the values using useState in React JS

I have a array of object

const formFields = {
    firstName: {
        value: '',
        label: 'FirstName',
        type: 'text',
        placeHolder: 'Enter Firstname',
        helperText: '',
        required: false,
        error: false
    },
    lastName: {
        value: '',
        label: 'LastName',
        type: 'text',
        placeHolder: 'Enter LastName',
        helperText: '',
        required: false,
        error: false
    },
    emailID: {
        value: 'sfas',
        label: 'emailID',
        type: 'email',
        placeHolder: 'Enter Email ID',
        helperText: '',
        required: true,
        error: false
    },
    password: {
        value: '',
        label: 'password',
        type: 'password',
        placeHolder: 'Enter password',
        helperText: '',
        required: true,
        error: false
    },
    confirmPassword: {
        value: '',
        label: 'confirmPassword',
        type: 'password',
        placeHolder: 'Enter Confirm Password',
        helperText: '',
        required: true,
        error: false
    }
}

const [inpValues, setInpValues] = useState(formFields)

Filter and Update

I am trying to filter the object by values where required === true and value.length === 0

and update the filtered array values like helperText = "Enter the " + label and error = true

const validate = () => {

    const requiredFields = Object.values(inpValues).filter((fields) => {
    if (fields.required === true && fields.value.length === 0) {

            //How to setInpValues

            //setInpValues(...inpValues, fields: { fields.helperText = "Enter the " + fields.label})
            //fields.error = true
        }
    })
}

<MyButton color="primary" handleOnClick={validate} text="SIGN UP"></MyButton>

Advertisement

Answer

The validate function should be, this will also take care of reverting the error back in case of validity.

const validate = () => {
    let newValues={...inpValues}
    const requiredFields = Object.keys(newValues).forEach((key) => {
    let field=newValues[key];
    if (field.required === true && field.value.length === 0) {
            field.helperText=`Enter the ${field.label}`;
            field.error = true;
            newValues[key]= field;
        }else{
           newValues[key].error=false;
           newValues[key].helperText='';
        }
    })
setInpValues(newValues);
}
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement