React - how to use params for setState

Question

i have a little wondering question, right now im trying to learn react, and i have a login form, like this:

this.state = {
          loginInputs: [
        {
            type: 'text',
            id: 'loginForUser',
            label: 'User',
            key: 'user',
            value: '',
            error: ''
        },
        {
            type: 'password',
            id: 'loginForPassword',
            label: 'Password',
            key: 'pass',
            value: '',
            error: ''
        }
    ]
}

and i map every input and render it in component.

also if the inputs are empty when you hit the login or register button, i want to update the array from state, and i wanted to create a usable function :

    const isInvalidInput = (inputValue) => inputValue.length < 2;

    updateError = (array) => {
    const updatedArray = [...array];
    updatedArray.forEach((input, index) => {
        if(isInvalidInput(input.value)) {
            updatedArray[index] = { ...input, error: 'errrrrrrorrrrrrrr'}
        }
    });
    alert("yeee");
    this.setState({
        [array]: updatedArray
    });
     console.log(updatedArray);
}

and i invoke this function in loginhandler:

// login handler
handlerLogin = (e) => {
    e.preventDefault();
    const { loginInputs, accounts } = this.state;

   if (inputname.length >= 2 && inputpass.length >=2) {
       store in localhost...
   } else {
       this.updateError(loginInputs);
   }

};

The problem is, when i let the fields empty and press the button, the function is called but the setState doesnt work, and errors from array are still empty. Can someone please help me with this?

thank you for your time :)

there are many, many, many Stack Overflow questions regarding react's `setState` function. which of them have you researched and why specifically did they not solve your problem? — Dan O, Feb 29 '20 at 12:39
It would even be better if you could show us a [mre] of your problem ... — Jonas Wilms, Feb 29 '20 at 13:09

score -1 · Accepted Answer · answered Feb 29 '20 at 12:34

-1

Can you try changing this.setState to below -

this.setState({
    loginInput: updatedArray
});

answered Feb 29 '20 at 12:34

Arpitha Chandrashekara

1,087
6
8

but if i write this, the updatedArray is not defined, because it comes from a function, and i want to use the function everytime when i need to show the error, not only in loginhandler – Marius Seba Feb 29 '20 at 12:39
if that is the case, instead of writing that setState in `updateError `, return the updatedArray from the function and setState in the calling function. – Arpitha Chandrashekara Feb 29 '20 at 12:42
it works, thank you :) – Marius Seba Feb 29 '20 at 14:40

score -2 · Answer 2 · answered Feb 29 '20 at 12:29

Brother instead of checking length yourself use minLength attribute that’s available for input. Also your validation don’t make it add for yourself. Go and receive about Regrex JavaScript so you can be using Pattern attribute . This will safe you from validating using if statement and also make your code clean . Check this

https://github.com/1cornerstone/RegrexForm/blob/master/src/component/mastercard.js

You can clone the project and view it.

thank you but it doesnt solve my problem :) – Marius Seba Feb 29 '20 at 12:32 — Marius Seba, Feb 29 '20 at 12:32

React - how to use params for setState

2 Answers2