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 Filtering Guests

Kamil Korczynski
Kamil Korczynski
367 Points
Posted by Kamil Korczynski
Kamil Korczynski
367 Points

You can not filter like that

You have array of 3 items [false, true, true] after filtering you are displaying 2 items. If you now toggle checkbox in a first shown item you will change the value of a first item in first array. Now your original array is [true, true, true] instead of [false, false, true].

in other words - you have displayed an array of 2 items and now every change will have index 0 or 1 and this index will be sent to toggleConfirmationAt function

7 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Kamil Korczynski,

That's exactly right -- it does create a "filter bug". We mention the bug in this video, then show you one (of many) possible solutions. :)

Kamil Korczynski
Kamil Korczynski
367 Points
Kamil Korczynski
Kamil Korczynski
367 Points

insted of filtering you should add if statement inside mapping function
if(!props.isFiltred || guest.isConfirmed) return ...

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Implementing this solution, you may get the following error from ES Lint:

Arrow function expected a return value array-callback-return

I resolved this by returning false after the if statement, but is there a more elegant way of doing this?

const GuestList = props =>
  <ul>
    {props.guests
      .map((guest, index) => {
        if (!props.isFiltered || guest.isConfirmed) {
          return (
            <Guest
              key={index}
              name={guest.name}
              isConfirmed={guest.isConfirmed}
              isEditing={guest.isEditing}
              handleConfirmation={() => props.toggleConfirmationAt(index)}
              handleToggleEditing={() => props.toggleEditingAt(index)}
              setName={text => props.setNameAt(text, index)} />
          );
        }
        return false;
      }
    )}
  </ul>;
Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i did feel something wasnt quite right so i did the same with simple if else statement, not sure if it create the same error you mentioned above!!

   {props.guests
    .filter( (guest) => {
       if(!props.isFiltered === true){
        return true;
    } else {
        return guest.isConfirmed;
        }
    })
Reid Young
PLUS
Reid Young
Courses Plus Student 14,209 Points
Reid Young
Reid Young
Courses Plus Student 14,209 Points

Rough spot to mention this one, guys. It definitely would have caused some confusion if Kamil didn't pose this question. Maybe add a disclaimer at the end of the video when you have the time so students know that the bug exists and that the fix is coming. Cheers!

Brad Chandler
Brad Chandler
15,301 Points
Brad Chandler
Brad Chandler
15,301 Points

Haven't watched the video recommended by Guil Hernandez yet, but I see the simplest way to correct this is to use a computed property on the App component.
Instead of passing down the isFiltered value, filter the guests and pass those to the GuestList component, replacing the guests prop value with the filtered guests function.
It would look something like this

  filteredGuests = () => {
    if (this.state.isFiltered) {
      return this.state.guests.filter(guest => {
        return guest.isConfirmed
      });
    } else {
      return this.state.guests;
    }
  }
....
<GuestList
  guests={this.filteredGuests()}
/>

Now when the isFiltered value changes, a different number of guests are sent.

Cristina Rosales
Cristina Rosales
10,929 Points
Cristina Rosales
Cristina Rosales
10,929 Points

Yeah, why go through the trouble of using a filter when a simple if/else statement will suffice?