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
Nicholas Grenwalt
46,626 PointsIs there a particular reason for leaving the index parameter in the map function in ./MainContent/index.js? (00:44)
It was previously stated that part of the refactoring he did was going through and in the map functions of the event handler he would get rid of the index parameters but in this particular case I noticed the index param was still passed in. Curious as to why Guil decided not to just pass in guest alone and then set key={guest.id} inside the Guest component that is nested. Any clarification would help. Thanks.
3 Answers
Babak Bandpey
Courses Plus Student 7,930 PointsHi, Regarding the key and the index. Be careful not to use the index as the value for the key. Each key must be unique to each element of the array. This means that when a certain element of the array is removed the key which was related to the element must not appear again. This could be a reason for leaving out the index because when you remove an array element you index may fall on the next element.
sona
1,126 PointsI think you can go ahead and remove it. he probably just missed it. ideally your linter would catch that index is declared and not used.
Saqib Ishfaq
13,912 Pointsthis fixed the issue.
const Guestlist = (props) =>
<ul>
<PendingGuest name={props.PendingGuestName}/>
{props.guests
.filter(guest => !props.isFiltered || guest.isConfirmed )
.map((guest,id) =>
<Guest
key={guest.id}
name={guest.name}
isConfirmed={guest.isConfirmed}
isEditing ={guest.isEditing}
handleConfirmation = { () => props.toggleConfirmationAt(guest.id)}
handleEditing = {() => props.toggleEditingAt(guest.id)}
setName = { (text) => props.setNameAt(text,guest.id)}
removeGuestName = {() => props.removeGuestAt(guest.id)}
/>
)}
</ul>
Tim Williams
Courses Plus Student 9,267 PointsTim Williams
Courses Plus Student 9,267 PointsBabak,
The question I believe Nick was asking was why DIDN'T he follow this approach for the map function on pending guest. I changed my code to the following below and totally missed that in the video. I'm assuming that it doesn't matter because its filtering based on the current array which executes in one direction, there's no function to revert back to the previous state and nor would it make sense to. I want to know what the right approach is here though because they both work. I want to make sure I'm not missing something by making this change:
<ul> <PendingGuest name={props.pendingGuest} /> {props.guests .filter(guest => !props.isFiltered || guest.isConfirmed) .map((guest, id)=> <Guest key={guest.id} name={guest.name} isConfirmed={guest.isConfirmed} isEditing={guest.isEditing} handleConfirmation={()=>props.toggleConfirmationAt(guest.id)} handleEditing={()=>props.toggleEditingAt(guest.id)} removeGuest={()=>props.removeGuestAt(guest.id)} setName={text => props.setNameAt(text, guest.id)} /> )} </ul>;