How to UseState Values in Input Array - reactjs

Question

Input Array
Form validation for password Matching to Show Error msg if paassword and confirm password not matched
const inputs =[
{
id:1,
name:"username",
type:"text",
placeholder:"username",
errorMsg:"username should be 3-16 characters and shouldn't include special character",
label:"Username",
pattern:`^[A-Za-z0-9]{3,16}$`,
required:true
},
{
id:2,
name:"email",
type:"email",
placeholder:"email",
errorMsg:"provide an valid email address",
label:"Email",
required:true
},
{
id:3,
name:"firstname",
type:"text",
placeholder:"first name",
errorMsg:"",
label:"Firstname"
},
{
id:4,
name:"lastname",
type:"text",
placeholder:"last name",
errorMsg:"",
label:"Lastname"
},
{
id:5,
name:"password",
type:"passwod",
placeholder:"password",
errorMsg:"password should be 8-20 characters and must contain 1 number 1 special character and upper case letter",
label:"Password",
pattern:`^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*].{8,20}$`,
required:true
},
{
id:6,
name:"confirmPassword",
type:"passwod",
placeholder:"confirm password",
errorMsg:"password does not matched",
label:"Confirm password",
// pattern:values.password,
required:true
}
]
export default inputs
form component
import React, {useState } from 'react'
import FormInput from '../../components/formInput/FormInput'
import './form.css'
import inputs from '../../components/formInput/input'
const Form = () => {
const [values,setValues]=useState({
username:"",
email:"",
firstname:"",
lastname:"",
password:"",
confirmPassword:"",
});
const handleChange=(e)=>{
setValues({...values,[e.target.name]:e.target.value})
}
console.log(values)
return (
<div className='container'>
<form className='form'>
<h1>Register Form</h1>
{inputs.map(input=>(<FormInput key={input.id} {...input} value={values[input.name]} onChange={handleChange} />))}
<button>Register</button>
</form>
</div>
)
}
export default Form
Input Component
import React from 'react'
import './formInput.css'
const FormInput = (props) => {
const {label,errorMsg,onChange,id,...inputprops} = props;
return (
<div className='formInput'>
<label>{label}:</label>
<input {...inputprops} onChange={onChange} />
<span>{errorMsg}</span>
</div>
)
}
export default FormInput
Here in Input Array I want to match password with Confirm Password but those are in state
How to Access them into Array input for Validation, The password has to Access in the input Array for matching as value pair for Pattern for id: 6

Answer 1

You can make validation on each character input. for eg. somethink like that:
const Form = () => {
const [values,setValues]=useState({
username:"",
email:"",
firstname:"",
lastname:"",
password:"",
confirmPassword:"",
});
const validatePasswordRepeat = e => {
return e.target.value === values.passowrd
}
const validate = (e) => {
if(e.name === "confirmPassword")
return validatePasswordRepeat(e);
return true;
}
const handleChange = (e) => {
if(!validate(e));
return; // or show validation message, set error etc
setValues({...values,[e.target.name]:e.target.value})
}
return (
<div className='container'>
<form className='form'>
<h1>Register Form</h1>
{inputs.map(input=>(<FormInput key={input.id} {...input} value={values[input.name]} onChange={handleChange} />))}
<button>Register</button>
</form>
</div>
)
or when user will try send the form. (better option)
const Form = () => {
const [values,setValues]=useState({
username:"",
email:"",
firstname:"",
lastname:"",
password:"",
confirmPassword:"",
});
const handleChange=(e)=>{
setValues({...values,[e.target.name]:e.target.value})
}
const validate = e => {
//make validation on form state in e (event)
}
const handleSubmit = useCallback((e) => {
if(!validate(e))
//show errores
// handle form send
}, [])
return (
<div className='container'>
<form className='form' onSubmint={handleSubmit}>
<h1>Register Form</h1>
{inputs.map(input=>(<FormInput key={input.id} {...input} value={values[input.name]} onChange={handleChange} />))}
<button>Register</button>
</form>
</div>
)
}
export default Form