what is the purpose of using spread operator here?-CodePudding

const defaultFormFields = {
  displayName: "",
  email: "",
  password: "",
  confirmPassword: "",
};

const SignUpForm = () => {
  const [formFields, setFormFields] = useState(defaultFormFields);
  const { displayName, email, password, confirmPassword } = formFields;

  const handleChange = (event) => {
    const { name,value } = event;
    // i've some doubt here how spread operator is working here
    // is it overiding the object what is really going on here
    setFormFields({...formFields,[name]:value})
  };
 
  …

i have written the code above i that is run when user enter something into the text fields then this code work according to the logic, i just wana ask how spread operator working here is it being used here to override that object if not then what is the purpose of using this spread operator??

CodePudding user response：

In your example, spread operator is used for copying everything that already existed inside formFields object into a new object and also adding/overriding a property passed dynamically with [name]: value syntax.

So basically spread operator in your code is doing a copy of formField object. I hope that answers your question.

CodePudding user response：

As you said, it already overriding object. forexample, here you have email and password input and in handleChange event you deconstruct name of them, so when you say {[name]:value} it mean sth like this {'password':value} but next time that email input change handleChange function will be called again and this object {[name]:value} means this {'email':value} so it will replace last state in formField state and your password value will be gone

for fixing this issue we use spreading to keep previous keys with values and override only one or more key values

CodePudding user response：

Using the spread operator like this is suffient for shallow cloning. Meaning it will clone the object one level deep. For this example works perfectly. But if you had an object like this.

const defaultFormFields = {
  displayName: "",
  email: "",
  password: "",
  confirmPassword: "",
  address: {
    city: ""
  }
};

Then it would not be a suffient way of cloning the address object.

You can try this by running the following code.

const defaultFormFields = {
  displayName: "",
  email: "",
  password: "",
  confirmPassword: "",
  address: {
    city: ""
  }
};

let shallowClone = { ...defaultFormFields };

shallowClone.displayName = "NewDisplayName";
shallowClone.address.city = "NewCity";

When you now console log the defaultFormFields object you will notice that displayName stays "", but the city changed to "NewCity". To fix this you would have to also apply the spread operator to the address field like so.

let deepClone = {
   ...defaultFormFields,
   address: { ...defaultFormFields.address }
}

The [name]:value part just applies your changes to the object. You could make any number of changes to the cloned object directly after the spread operator without an extra statement below it. Order matters here, last one wins.