Tengo esta función y necesito que se aplique un mensaje de error alrededor de un elemento en particular; donde falla la validación.
Actualmente, el mensaje SetError se aplica a todos los elementos del formulario en el bucle.
async function onUserInput(element, value) { console.log(element); if (typeof element === 'string') { let pageUserInputCopy = [...pageUserInput]; let index = pageUserInputCopy.findIndex((obj) => obj.key === element); let itemCopy = { ...pageUserInputCopy[index] }; itemCopy['userInput'] = value; pageUserInputCopy[index] = itemCopy; setPageUserInput(pageUserInputCopy); } if (await isValid(value)== false) { setErrorMessage('Collection Container ID already exists!'); setHasError(true); }}
El problema es que su Promesa se evaluará como undefined si está escrita dentro de una declaración if porque no se evalúa correctamente.
Esto debería funcionar:
async function onUserInput(element, value) { console.log(element); if (typeof element === "string") { let pageUserInputCopy = [...pageUserInput]; let index = pageUserInputCopy.findIndex((obj) => obj.key === element); let itemCopy = { ...pageUserInputCopy[index] }; itemCopy["userInput"] = value; pageUserInputCopy[index] = itemCopy; setPageUserInput(pageUserInputCopy); } const valid = await isValid(value); if (!valid) { setErrorMessage("Collection Container ID already exists!"); setHasError(true); } }