More elegant way of checking all state values

Question

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

If you need the data to be an empty string instead of `null`, you could just initialize the `useStates` that way. Or in the validation you could just do simply falsy checks instead of strict equality so that `null` or `''` gets treated the same? — Brian Thompson, Sep 14 '21 at 15:19
It could also clean up the code a bit to flatten out all the customer/state information into a single temporary string and check if that one string is empty. — Slothyboi, Sep 14 '21 at 15:21
@BrianThompson - I don't need them to be one over the other, I am using the two just for the differentiation between when the page loads (states initialised to null) and the point at which submit is pressed. If I have the error conditional looking for null, they would all error on page load as they render empty. — Jaden Walker, Sep 14 '21 at 15:24

The Fool · Accepted Answer · 2021-09-14T21:39:27.450

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'})

score 0 · Answer 2 · answered Sep 14 '21 at 15:30

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,
  },
}));

More elegant way of checking all state values

2 Answers2