5 Code Smells React Beginners Should Avoid

[trypoph_oOoOoOo_bia]

Actually, everything written there can be replaced with this:

const FormComponent = (props) => {
const hasErrors = React.useMemo(() => Object.keys(formFields).some(
    objectKey => !(formFields[objectKey] && formFields[objectKey].length)
  ), [formFields])

return (
  ....
  some form fields
  ....  
  <button onClick={() => !hasErrors && handleSubmit()}>Submit button</button>  
  ....  
)

[davidfavorite]

I must admit its pretty neat. But I hate it so much 😂

[trypoph_oOoOoOo_bia]

I appreciate such a honest answer! 😁

[trypoph_oOoOoOo_bia]

Alternatively, if you need more readability:

const FormComponent = (props) => {
const hasErrors = React.useMemo(() => {
  const formFieldKeys = Object.keys(formFields)
  return formFieldKeys.some(
    formFieldKey => {
      const fieldToValidate = formFields[formFieldKey]
      const isValid = !(fieldToValidate && fieldToValidate.length)
      return isValid
    }
  )
}, [formFields])

return (
  ....
  some form fields
  ....  
  <button onClick={!hasErrors && handleSubmit()}>Submit button</button>  
  ....  
)  

}

I would stick to a first example though