I've a series of user data elements which I'm collecting inside a React component using hooks.
const [mobile, setMobile] = useState('');
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
Each of these are updated as follows.
<input type="text"
className="form-control"
id="mobile"
placeholder="Enter a valid mobile number"
onChange={event => {setMobile(event.target.value)}}/>
Is there a more succint way to do this using an object as the variable?
You should add name
attributes to input tags. Each name must refer to key in AllValues
object.
const [allValues, setAllValues] = useState({
mobile: '',
username: '',
email: '',
password: '',
confirmPassword: ''
});
const changeHandler = e => {
setAllValues({...allValues, [e.target.name]: e.target.value})
}
return (
<input type="text"
className="form-control"
id="mobile"
name="mobile"
placeholder="Enter a valid mobile number"
onChange={changeHandler}
/>
// ...
)