Adding to state variable array

When i click on the button, it executes the “test” function but it only adds “2” to the state variable. Anybody knows why it doesnt add “1” and “2”?

const [errors, setErrors] = useState({isValid: true, errorMessages: []})

const addErrorMessage = async(errorMessage) => {
        let joined = errors.errorMessages.concat(errorMessage);
        setErrors({ isValid: false, errorMessages: joined });
    }

    const test = async () => {
        await addErrorMessage('1');
        await addErrorMessage('2');
    }

    return (
        <IonPage>
            <IonHeader>
                <Header />
            </IonHeader>
            <IonContent fullscreen>
                <IonList>
                    {!errors.isValid &&
                        errors.errorMessages.map((entry, index) =>
                            <IonItem key={index}>{entry.valueOf()}</IonItem>
                        )
                    }
                </IonList>
                <IonButton onClick={test}>
                    test
                </IonButton>
            </IonContent>
        </IonPage>
    );
};

what are you trying to accomplish might be the better question? I think you are making assumptions about how useState works that are causing issues. Also, addErrorMessage is asyc for no apparent reason and it doesn’t appear to be returning anything

This is demo code to show my problem better.

I have a form and before sending the information to the server i want to check the values.

So i have this function errorCheck (in this example “test”) wich checks for some stuff and, if needed has to add an error message to the state variable “errors”.

Eg;

// title and description are state variables aswell
if (title.length < 5) await addErrorMessage('at least 5 characters are required for the title');
if (description.length < 20) await addErrorMessage('at least 20 characters are required for the description');

In my page code i have:

                    {!errors.isValid &&
                            errors.errorMessages.map((entry, index) =>
                                <IonItem key={index}>{entry.valueOf()}</IonItem>
                            )
                    }

to display all the error messages.

So i want to add the parameters of “addErrorMessage” to the state variable errors.errormessages.

Still new to async functions so could be addErrorMessage does not need to be async. I was trying different stuff before asking here :slight_smile:

i would suggest you use a form validation framework that will manage all of this for you instead of rolling your own.

Im working in react but i’ll search some videos about if in react. Any clue what im doing wrong though? Did something similar in php and it worked just fine so i think my mistake is the way im using async functions.

my bad i was just answering a vue question - here you go with some react samples

Oh wow, I was just watching this video of you, what a coincidence, did not see it was you at first xd

that is a good one too, i personally use react hook form for my projects… please make sure you like and subscribe… since you are watching already :+1:t6:

Ill watch both the videos and decide :slight_smile:

Another question as i’ll have to redo something and i probably wont be able to do it exactly the same way.

The form is to add a recipe. A recipe has multiple ingredients. ATM my placeholder says to seperate ingredients with a comma and i have a function wich converts this string of ingredients into an array based on the comma.

How would you handle this?

here is a another video with code I believe