Is there a more elegant way of checking all state variables in my react app ? I currently have 14 state variables within my app, I am checking the value of each and updating to an empty string if they do not pass validation (left empty) code is as:
const [customerName, setCustomerName] = useState(null)
const [customerPhone, setCustomerPhone] = useState(null)
const [customerEmail, setCustomerEmail] = useState(null)
const [customerAddress, setCustomerAddress] = useState(null)
const [customerPostal, setCustomerPostal] = useState(null)
const [purchasePrice, setPurchasePrice] = useState(null)
const [colleagueName, setColleagueName] = useState(null)
const [branch, setBranch] = useState(null)
const [branchPhone, setBranchPhone] = useState(null)
const [otherCompany, setOtherCompany] = useState(null)
const [furtherInformation, setFurtherInformation] = useState(null)
function submission() {
if (customerName === null) {
setCustomerName('')
}
if (customerPhone === null) {
setCustomerPhone('')
}
if (customerEmail === null) {
setCustomerEmail('')
}
if (customerAddress === null) {
setCustomerAddress('')
}
if (customerPostal === null) {
setCustomerPostal('')
}
if (purchasePrice === null) {
setPurchasePrice('')
}
if (surveyType === null) {
setSurveyType('')
}
if (colleagueName === null) {
setColleagueName('')
}
if (branch === null) {
setBranch('')
}
if (branchPhone === null) {
setBranchPhone('')
}
if (company === null) {
setCompany('')
}
if (company === 'Other' && otherCompany===null) {
setCompany('Other')
setOtherCompany('')
}
if (
customerName !== ''
&& customerPhone !== ''
&& customerEmail !== ''
&& customerAddress !== ''
&& customerPostal !== ''
&& purchasePrice !== ''
&& surveyType !== ''
&& colleagueName !== ''
&& branch !== ''
&& branchPhone !== ''
&& company !== ''
&& otherCompany !== ''
){
console.log('validation passed')
}
};
This does work, so its not the end of the world, but it just seems as though its not very elegant and I feel like there could be a more concise remedy out there?
Thanks
Maybe something along these lines. As all these state variables seem to be tightly coupled. I don't see why they can't be one object.
const [sale, setSale] = useState({
customerName: '',
customerPhone: '',
customerEmail: '',
customerAddress: '',
customerPostal: '',
purchasePrice: '',
surveyType: '',
colleagueName: '',
branch: '',
branchPhone: '',
company: '',
otherCompany: '',
})
const checksPasssed = Object.values(sale).every(v => v)
If you need to update one of them you can use spread.
setSale({...sale, company: 'yahoo'})
Options:
Use useReducer()
hook.
From the docs:
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
Use some kind of state management like Redux - if this state needs to be accessed by other components also. You can also use Context API.
You can put all this state in a single nested object & then use useState:
const [nestedState, setNestedState] = useState({
a: 1,
b: 'Shivam',
c: {
name: 'Sj',
age: '20',
},
});
// Then use `setnestedState()`:
setNestedState(prevState => ({
...prevState,
c: {
...prevState.c,
age: 22,
},
}));