React-NextJs - pass data from input attribute & input value as key:value json to state

Question

i'm trying to set user registration state from a function that runs from every single input in a form, and the function receives 2 parameters.. key & value the key is equal to the input name attribute and the value is equal to the input value..

when i run this function the parameters that the function receives are correct but when i use the key:value in a setState the key remains "key" and the value passes correctly..

here's the code.

    const [userRegister, setUserRegister] = useState(
            {
                "userFirstName":"", 
                "userLastName":"", 
                "userEmail":"", 
                "userPhoneNumber":"", 
                "userPassword":""
            }
        );

    function handleValidation(key, value) {
        console.log(key);
        console.log(value);
        setUserRegister({...userRegister , key:value})
    }

                        <input 
                        type="text" 
                        name="userFirstName" 
                        id="userFirstName" 
                        placeholder="first name"
                        onBlur={(e) => handleValidation(e.target.name, e.target.value)}
                        />

Thanks :)

Answer 1

In order to replace the value of a varible as an object's key, use []. Example: setUserRegister({...userRegister , [key]:value})