Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React by Example Building the Application Toggling Edit State for Guests

Trevor Maltbie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,020 Points
Posted by Trevor Maltbie
.a{fill-rule:evenodd;}techdegree seal-36
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,020 Points

why is [property]: in brackets?

toggleGuestPropertyAt = (property, indexToChange) =>
    this.setState((prevState) => {
      return {
        guests: prevState.guests.map((guest, index) => {
          if (index === indexToChange) {
            return {
              ...guest,
              [property]: !guest[property]
            }
          }
          return guest
        })
      }
    })

    toggleConfirmationAt = index =>
      this.toggleGuestPropertyAt("isConfirmed", index)

    toggleEditingAt = index =>
      this.toggleGuestPropertyAt("isEditing", index)

I understand why in !guest[property] property is inside [] but why is it also inside brackets before the colon? ( [property]: ... )

1 Answer

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 Points

Hi Trevor,

The brackets (in this instance) allow for a value to replace the property variable as the “key” of the key/value pairing.

In this case, the programmer doesn’t know beforehand which property will be toggled.

But when the user performs the action that causes the toggleGuestPropertyAt function to be called, the property that needs to be toggled will be passed in as an argument.

Let’s say (for example) the property is something like hasArrived (I haven’t watched the video so I don’t know what the actual properties are). hasArrived would be a property that stores a Boolean value. As the user perhaps we click some button on the interface when a particular guest shows up. That button leads to toggleGuestPropertyAt being called, and hasArrived is passed in as an argument (along with the index number). Well, when the interpreter gets to the part of the code where the guest objects are being mapped over, we need some way to change the value of the key targeted. You understand that part. It’s the !guest[property], but we also need a way to target the correct key. If we hardcoded the property hasArrived, as in:

app.js 
return {
    ...guest,
    hasArrived: !guest[property]
}

... then if we need to toggle a different property, out code won’t work correctly.

But if we don’t wrap property in brackets, then the interpreter thinks we want to change the value of a key named property (but a key with the name property doesn’t exist).

The brackets signify to the interpreter that the property we’re targeting needs to be subbed in using the “property argument” passed into the function.

That’s a long explanation, but hopefully it helps you to understand the purpose of the brackets.

Keep at it coder!

Zaid Khan
Zaid Khan
12,769 Points

Thank You for this Brandon I was too having a problem understanding this concept, your explanation is impeccable, sad to see that this isn't marked as the best answer.