I have this function and I need error message to be applied on around particular element; where validation fails.
Currently the SetError message is applied all the form elements in the loop.
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);
}
}
The problem is that your Promise will get evaluated as undefined if it's written inside an if statement because it is not being evaluated properly.
This should do the trick:
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);
}
}