Hola, tengo una pregunta porque decidí usar el gancho 'useReducer' para manejar múltiples entradas en el formulario. Y mi componente se ve a continuación. Como podemos ver hay un código repetitivo. Lo que me gustaría arreglar es 'isValid' para cada entrada. ¿Es posible manejar esto o está bien repetir este código? No soy profesional, solo estoy aprendiendo React y ya sabes, todo el mundo me habla del principio DRY.

 const initialReducerValue = { name: '', lastName: '', phoneNumber: '', city: '', street: '', postal: '', nameIsValid: false, lastNameIsValid: false, phoneNumberIsValid: false, cityIsValid: false, streetIsValid: false, postalIsValid: false, formIsValid: false } const OrderForm = () => { const orderReducer = (state, action) => { if (action.type === 'HANDLE TEXT CHANGE') { return { ...state, [action.field]: action.payload, } } } const [formState, formDispatch] = useReducer(orderReducer, initialReducerValue) console.log(formState) const changeTextHandler = (e) => { formDispatch({ type: 'HANDLE TEXT CHANGE', field: e.target.name, payload: e.target.value }) } return ( <div className={styles.orderForm}> <label htmlFor='name'>Name</label> <input onChange={changeTextHandler} id="name" name='name' type='text' /> <label htmlFor='lastName'>Last Name</label> <input onChange={changeTextHandler} id="lastName" name='lastName' type='text' /> <label htmlFor='phoneNumber'>Phone Number</label> <input onChange={changeTextHandler} id="phoneNumber" name='phoneNumber' type='number' /> <label htmlFor='city'>City</label> <input onChange={changeTextHandler} id="city" name='city' type='text' /> <label htmlFor='street'>Street</label> <input onChange={changeTextHandler} id="street" name='street' type='text' /> <label htmlFor='postal'>Postal Code</label> <input onChange={changeTextHandler} id="postal" name='postal' type='text' /> {<SendOrderButton isValid={formState.isValid} /> } </div> ) }