I have a array of object
JavaScript
x
50
50
1
const formFields = {
2
firstName: {
3
value: '',
4
label: 'FirstName',
5
type: 'text',
6
placeHolder: 'Enter Firstname',
7
helperText: '',
8
required: false,
9
error: false
10
},
11
lastName: {
12
value: '',
13
label: 'LastName',
14
type: 'text',
15
placeHolder: 'Enter LastName',
16
helperText: '',
17
required: false,
18
error: false
19
},
20
emailID: {
21
value: 'sfas',
22
label: 'emailID',
23
type: 'email',
24
placeHolder: 'Enter Email ID',
25
helperText: '',
26
required: true,
27
error: false
28
},
29
password: {
30
value: '',
31
label: 'password',
32
type: 'password',
33
placeHolder: 'Enter password',
34
helperText: '',
35
required: true,
36
error: false
37
},
38
confirmPassword: {
39
value: '',
40
label: 'confirmPassword',
41
type: 'password',
42
placeHolder: 'Enter Confirm Password',
43
helperText: '',
44
required: true,
45
error: false
46
}
47
}
48
49
const [inpValues, setInpValues] = useState(formFields)
50
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
JavaScript
1
15
15
1
const validate = () => {
2
3
const requiredFields = Object.values(inpValues).filter((fields) => {
4
if (fields.required === true && fields.value.length === 0) {
5
6
//How to setInpValues
7
8
//setInpValues(...inpValues, fields: { fields.helperText = "Enter the " + fields.label})
9
//fields.error = true
10
}
11
})
12
}
13
14
<MyButton color="primary" handleOnClick={validate} text="SIGN UP"></MyButton>
15
Advertisement
Answer
The validate function should be, this will also take care of reverting the error back in case of validity.
JavaScript
1
16
16
1
const validate = () => {
2
let newValues={inpValues}
3
const requiredFields = Object.keys(newValues).forEach((key) => {
4
let field=newValues[key];
5
if (field.required === true && field.value.length === 0) {
6
field.helperText=`Enter the ${field.label}`;
7
field.error = true;
8
newValues[key]= field;
9
}else{
10
newValues[key].error=false;
11
newValues[key].helperText='';
12
}
13
})
14
setInpValues(newValues);
15
}
16