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

Elliott Tuan
Elliott Tuan
7,790 Points
Posted by Elliott Tuan
Elliott Tuan
7,790 Points

TypeError: Cannot read properties of undefined (reading 'filter')

I try to use functional component instead of class component, but got this error.

I've tried testing the onChange , checked , toggleFiltered() , and even delete the .filter method, error still shows on .map.

//App.js
function App() {

  const [guestsList, setGuestsList] = React.useState({
    isFiltered: true,
    guests: [
      {
        name: "Elliott",
        isConfirmed: false,
        isEditing: false
      },
      {
        name: "Matt",
        isConfirmed: true,
        isEditing: false
      }
    ]
  })

  const toggleFiltered = () => {
    setGuestsList({isFiltered: !guestsList.isFiltered})
  }

<input 
  type="checkbox"
  checked={guestsList.isFiltered}
  onChange={toggleFiltered}
/> Hide those who haven't responded

 <GuestList 
    guests={guestsList.guests}
    toggleConfirmation={toggleConfirmation}
    toggleEditing={toggleEditing}
    setName={setName}
    isFiltered={guestsList.isFiltered}
/>

//GuestList.js
const GuestList = (props) => 

<div>
    <ul>
        {props.guests
            .filter(guest => !props.isFiltered || guest.isConfirmed )
            .map((guest,index) =>  
                <Guest 
                    key={index} 
                    name={guest.name} 
                    isConfirmed={guest.isConfirmed}
                    isEditing={guest.isEditing}
                    toggleConfirmation={() => props.toggleConfirmation(index)} 
                    toggleEditing={() => props.toggleEditing(index)} 
                    setName={text => props.setName(text, index)}  
                />
        )}
    </ul>
</div>
Eric Agbayani
.a{fill-rule:evenodd;}techdegree seal-36
Eric Agbayani
Full Stack JavaScript Techdegree Graduate 15,011 Points

Try console logging props.guest and see if you are getting data from there, I would save the data as a constant like 

const GuestList = (props) => 
const guests = props.guests
<div>
    <ul>
        {guests.filter(guest => !props.isFiltered || guest.isConfirmed )
            .map((guest,index) =>  
                <Guest 
                    key={index} 
                    name={guest.name} 
                    isConfirmed={guest.isConfirmed}
                    isEditing={guest.isEditing}
                    toggleConfirmation={() => props.toggleConfirmation(index)} 
                    toggleEditing={() => props.toggleEditing(index)} 
                    setName={text => props.setName(text, index)}  
                />
        )}
    </ul>
</div>

and see if this works.

Elliott Tuan
Elliott Tuan
7,790 Points
Elliott Tuan
Elliott Tuan
7,790 Points

Eric Agbayani it still doesn't work. And i can get data by console logging:

(2) [{…}, {…}]
0: {name: 'Elliott', isConfirmed: false, isEditing: false, isRemoved: false}
1: {name: 'Matt', isConfirmed: true, isEditing: false, isRemoved: false}
length: 2
[[Prototype]]: Array(0)

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi Elliott Tuan something is missing / incorrect with your code setup. I copied the project files from the video (using RSVP_FINAL) and changed the class component to a function component (copying all of your code snippets above). With that in mind I was able to achieve displaying the filtered guests (Matt as the only one filtered based off the boolean).

One thing to note is that the project files are setup to use react, react-dom at version 15. useState is a hook that is introduced in react 16.8, so make sure that both these packages are installed at that version.