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 Writing a Handler to Confirm Guests

Why use map?

What is the benefit of using the map function to toggle the state over something like the below?

this.setState({
  guests[index]: !this.state.confirmed
});

2 Answers

Ari Misha
Ari Misha
19,268 Points

Hiya Chris! Map function is really flexible and the best thing about it is , it doesnt mutate the original array.Plus the result will be an array as well. You can loop over an array as well in a single statement without using loops. This can come really handy in React. These are the benefits of using Map function.

Now regarding your code , using ! (bang) flips the result, right? In the code , you're setting the current state. And passing in an object containing guests array. Now for current guest , you are flipping the confirmation state with !.

~ Ari

Anthony Albertorio
Anthony Albertorio
22,169 Points

I don't see a need to use map either. You have the index already. The index provided by the app won't be out of range, since its limited to the UI on the screen. So, code provided looks unnecessarily complex. Why not just do: Kudos to Kye Buffery for the idea. See: https://teamtreehouse.com/community/can-i-change-directly-the-specific-guest

Also direct mutations to state are not a good idea. The whole idea of the way React is designed is to make thinking about state easy by making it one way and simple.

Like Kye said, see: https://reactjs.org/tutorial/tutorial.html#why-immutability-is-important

  toggleConfirmationAt = indexToChange => {
    const guestsArr = this.state.guests.slice();  // don't mutate, get copy
    guestsArr[indexToChange].isConfirmed = !guestsArr[indexToChange].isConfirmed;
    this.setState({guests: guestsArr});
  };
Oziel Perez
Oziel Perez
61,321 Points

Agreed! I was having some difficulty wrapping my head about this pattern of development, but it makes so much more sense now. By doing this you can more easily track changes in data and you can make unit testing much easier. I realized a while back that I had to get into the habit of writing pure functions in web apps, so I started doing so, but I was still wondering how to apply that to changes in the DOM and to sets of data that would normally exist in a global scope. I now understand that making changes directly to data sets is not as effective as copying the objects first and then loading them back in; something I still hadn't done in my pure functions. React is the framework I didn't know I needed!