JavaScript - How to merge/append to an Object/Array - ReactJS - Spread Syntax

Question

I am having trouble trying to append something my object, using the spread syntax.

Depending on the fact whether the NewPerson is there for a private/professional occasion I want to append additional key/values to the object/array.

Somehow it does not work. Hopefully someone can help me out. :(

 var NewPerson = [ Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, Occasion: this.state.addPersonOccasion, ]; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = [ ...NewPerson, ...[ProfEmployerName: this.state.addPersonOccasionProfEmployerName], ...[ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ], ...[ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity], ...[ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT] ] } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = [ ...NewPerson, ...[PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet], ...[PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ], ...[PrivPersonCity: this.state.addPersonOccasionPrivPersonCity] ] } var CombinedPersons if (PreviousPersons === null) { CombinedPersons = NewPerson } else { CombinedPersons = [...PreviousPersons, ...NewPerson] }

Answer 1

You should use Objects instead Array because Objects have key-value pairs. You could do (in ES6 syntax):

const { addPersonOccasion } = this.state;

const isProfessional = addPersonOccasion === 'OccasionProfessional';
const isPrivate = addPersonOccasion === 'OccasionPrivate';

const NewPerson = {
    Firstname: this.state.addPersonFirstname,
    Lastname: this.state.addPersonLastname,
    Birthday: this.state.addPersonBirthday,
    Occasion: this.state.addPersonOccasion,
    ...(isProfessional && {
      ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
      ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
      ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity,
      ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT
    }),
    ...(isPrivate && {
        PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet,
        PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ,
        PrivPersonCity: this.state.addPersonOccasionPrivPersonCity
    })
};


let CombinedPersons = [NewPerson];


if (PreviousPersons !== null) {
  CombinedPersons = [...PreviousPersons, ...CombinedPersons]
} 

Answer 2

You don't need to spread the new properties...

You can:

if (this.state.addPersonOccasion === 'OccasionProfessional') {
    NewPerson = {
        ...NewPerson,
        ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
        ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
        //... and so on
    }
}

Answer 3

You seem to be mixing up arrays and objects in this case. You want all the properties of a person isolated to a single entity. Object works out best in such cases.

 var NewPerson = { Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, Occasion: this.state.addPersonOccasion, }; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = { ...NewPerson, ProfEmployerName: this.state.addPersonOccasionProfEmployerName, ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ, ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity, ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT } } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = { ...NewPerson, PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet, PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ, PrivPersonCity: this.state.addPersonOccasionPrivPersonCity ] } var CombinedPersons if (PreviousPersons === null) { CombinedPersons = [NewPerson] } else { CombinedPersons = [...PreviousPersons, {...NewPerson}] }

PreviousPersons will be an array of person objects.

Answer 4

A combination of all your answers made the final version:

 var NewPerson = { Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, SigImage: this.sigPad.getCanvas().toDataURL('image/png'), Occasion: this.state.addPersonOccasion, }; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = { ...NewPerson, ProfEmployerName: this.state.addPersonOccasionProfEmployerName, ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ, ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity, ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT } } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = { ...NewPerson, PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet, PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ, PrivPersonCity: this.state.addPersonOccasionPrivPersonCity } } // Save the user input to NewPerson var - End // Create combined var with PreviousPersons and NewPerson - Start var CombinedPersons if (PreviousPersons === null) { CombinedPersons = [NewPerson] } else { CombinedPersons = [ ...PreviousPersons, NewPerson ] } // Create combined var with PreviousPersons and NewPerson - End