JavaScript React Basics

HI I am new to React and find it fun but confusing at times.

In a video we were asked to wire up a function to handle a click event for removing a guest from an array that contains a list of invited guests to a party.

I eventually got it working but found a problem which is best explained by adding the code, so below is non working code. Then below that the working code. The important bit is the handleRemove

   const GuestList = (props) =>

  <ul>
    {props.guests
      .filter((guest) => !props.isFiltered || guest.isConfirmed)
      .map((guest, index)=>
        <Guest key={index} name ={guest.name}
         isConfirmed ={guest.isConfirmed}
         isEditing = {guest.isEditing}
         handleConfirmation ={()=> props.toggleConfirmationAt(index)}
         handleToggleEditing ={()=> props.toggleEditingnAt(index)}
         setName ={(text) => props.setNameAt(text,index)}
         handleRemove = {() => props.removeGuestAt(index)}/>


   )}
  </ul>;

Note how the handleRemove has the index passed to it, which is on the right handside props.removeGuestAt(index)}.

which I understand to be the value(key) associated with each invited guest.

When I first failed at wiring this up I put the index on both sides which I will paste below:

   const GuestList = (props) =>

  <ul>
    {props.guests
      .filter((guest) => !props.isFiltered || guest.isConfirmed)
      .map((guest, index)=>
        <Guest key={index} name ={guest.name}
         isConfirmed ={guest.isConfirmed}
         isEditing = {guest.isEditing}
         handleConfirmation ={()=> props.toggleConfirmationAt(index)}
         handleToggleEditing ={()=> props.toggleEditingnAt(index)}
         setName ={(text) => props.setNameAt(text,index)}
         handleRemove = {(index) => props.removeGuestAt(index)}/>


   )}
  </ul>;

As you can see the rest of the code is the same, but this one mistake means when you click the remove button in the form nothing works. Also you can not log out the index to the console. So it is not getting back up the tree to the removeGuestAt(index) ?

Although it is passed index it is not the right one, but no error occurs to say what index is this, it just doesn't do as you want. I understand that handleRemove will catch the click() event but not index... So what index is this? What is the index on the left that is then passed to props.removGuestAt(index)