Tengo un formulario con 3 entradas archivadas PRIMER NOMBRE, APELLIDO, NÚMERO. Entonces, una vez que se abren los formularios, hay un conjunto particular de valores precargados que provienen del backend. Entonces, si trato de agregar una verificación de validación para mi nombre y si el usuario deja el campo en blanco y hace clic en enviar, me muestra indefinido en la consola para el valor del nombre respectivo. Entonces, ¿alguien podría ayudar a agregar una verificación de validación para el nombre, el apellido y el número?

 const EditContact = inject('Contacts')(observer((props) => { const { text, Contactfirst, apptContacts } = props; const { updateContact } = apptContacts; const CMS = text.appointmentManager.editAppointmentContact; const [state, setState] = React.useState({ data: { firstName: Contactfirst[0], lastName: Contactfirst[1], number: Contactfirst[2], }, firstNameValid: '', lastNameValid: '', numberValid: '', }); const handleTextareaChange = (event) => { const { data } = state; data[event.target.name] = event.target.value; setState({ data, }); }; const valid = () => { if (state.data.firstName !== 'undefined') { setState({ firstNameValid: 'Required.Please enter your given name.' }); } }; const saveButton = () => { if (valid()) { const personName = `${state.data.firstName} ${state.data.lastName}`; const primaryContact = { name: personName, phoneNumber: state.data.number, }; } }; return ( <div> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} /> <h1 tabIndex="-1" className="HeadingB mt-sheet-heading"> {CMS.heading1} </h1> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} /> <TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} /> <p>{state.firstNameValid}</p> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} /> <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} /> <p>{state.lastNameValid}</p> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} /> <TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} /> <p>{state.numberValid}</p> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} /> <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} /> </div> ); })); export default EditContact ;