He estado trabajando en una aplicación de prueba en react y firebase y actualmente estoy validando un formulario para crear una nueva prueba. Podría clavarlo después de trabajar en él hasta el mediodía. El problema que tuve es que después de enviar el formulario, recibí errores de validación en el nuevo formulario. Cuando implemento validaciones para cada entrada, las agrego verdaderas o falsas si están enfocadas con useState(). Después del envío, todavía estaban encendidos, así que recibí un error de validación para todas las entradas. Quiero eliminar los valores de las entradas que se almacenaron correctamente en Firestore y mostrar el nuevo formulario de prueba para crear una nueva prueba.

¿Alguien podría enseñarme cómo desactivar el foco con useState ()?

FormInputText.jsx

 import React, { useState } from 'react'; const FormInputText = props => { const [focused, setFocused] = useState(false); const handleFocus = e => { setFocused(true); }; const { label, err, onChange, id, ...inputProps } = props; return ( <div className='quizFormInputText'> <label htmlFor={label}>{label}</label> <input {...inputProps} onChange={onChange} required onBlur={handleFocus} focused={focused.toString()} /> <span className='quizFormErrMsg'>{err}</span> </div> ); }; export default FormInputText;

Cuando los usuarios hacen clic en el botón Enviar, se activa la siguiente función, que es una de algunas funciones en NewQuiz.jsx. Supongo que puedo hacer algo en esta función para corregir este error que muestra errores de validación en el nuevo formulario de prueba:

NuevoCuestionario.jsx

 const handleSubmit = async e => { // const quizRef = doc(db, 'quizzes', 'category'); // await setDoc(quizRef, payload); e.preventDefault(); console.log("handlesubmit") // When all validatations are fine. const quizCollectionRef = collection(db, 'quizzes'); const payload = { question: values['question'], answers: [ values['answer1'], values['answer2'], values['answer3'], values['answer4'], ], correctAnswer: parseInt(values['correctAnswer']), likes: 0, createdAt: new Date(), category: values['category'], }; await addDoc(quizCollectionRef, payload); setValues({ question: '', answer1: '', answer2: '', answer3: '', answer4: '', correctAnswer: 0, createdAt: '', category: '', // how to set it to default value }); };