Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 16,996 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
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

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!

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.