CODEWITHSUNDEEP
reactjsfirebase
FabricioG
FabricioG

Reputation: 3320

Spread operator in react is causing each character to be saved in it's own array, when updating in firebase

I'm having a problem where the array of state is being saved but it's taking each character and making it it's own array index.

Here is my code:

   const { currentOrganization, phone, email,
      address, address2, city, zip, headOfHousehold, household,
      firstHousehold, lastHousehold, householdDropdown } = this.state;

    this.props.firebase.db.ref('organization/' + currentOrganization + '/members').push()
    .then(snap => {
       return snap.key
    })
    .then(keyUid => {
      this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + keyUid ).set(
        {
            first: firstHousehold,
            last: lastHousehold,
            phone: phone,
            email: email,
            address: address,
            address2: address2,
            city: city,
            zip: zip,
            headOfHousehold: headOfHousehold,
            household: [...household, keyUid],
          })
          return keyUid;
    })
    .then(newHouseholdUid => {
      this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + this.state.memberKeyID ).update({
        household: [...household, newHouseholdUid]
      })
      this.setState({ houseHoldGroup: [...this.state.houseHoldGroup, {
        firstHousehold: firstHousehold, lastHousehold: lastHousehold, householdDropdown: householdDropdown }] })
    })

  }

In the above code I'm saying household to two different members in firebase database. The value appears in firebase but it looks like this:

0: 
"-"
1: 
"L"
2: 
"q"
3: 
"A"
4: 
"E"
5: 
"X"
6: 
"z"
7: 
"v"
8: 
"G"
9: 
"H"
10: 
"T"
11: 
"f"
12: 
"s"
13: 
"4"
14: 
"j"
15: 
"J"
16: 
"2"
17: 
"T"
18: 
"8"
19: 
"r"
20: 
"-LqAEeTs2lfQYujNbQub"

For some reason the spread operator is breaking up my value into each character. Any idea what I'm doing wrong?

Upvotes: 0

Views: 74

Answers (1)

Stefan Januschke
Stefan Januschke

Reputation: 312

It seems that you are spreading a string instead of an array (household). This results in the String being separated into the individual characters.

Making sure household is an array should do the trick.

To ensure this you could require the npm library "prop-types" which ensures that props have a specific format when passed into a component.

Used like:

[ComponentName].propTypes = {
household: PropTypes.arrayOf(PropTypes.string).isRequired
//... other props
}

If in the end not an array of strings but a string is passed you would get a console error, making it easier to understand what goes wrong

Upvotes: 1

Related Questions