After adding the remove, all my guests disappeared

import React, { Component } from 'react';
import './App.css';
import GuestList from './GuestList'

class App extends Component {

  state = {
    isFiltered: false,

    pendingGuest: "",

    guests: [
      {
        name: 'Rapha',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Filipe',
        isConfirmed: true,
        isEditing: false
      },
      {
        name: 'Eloi',
        isConfirmed: true,
        isEditing: true
      }
    ]
  }

  toggleGuestPropertyAt = (property,indexToChange) => {
    this.setState({
      guests: this.state.guests.map((guest, index) =>{
        if (index === indexToChange) {
          return {
            ...guest,
            [property]: !guest[property]
          };
        }
        return guest;
      })
    })
  }

  toggleConfirmationAt = index => {
    this.toggleGuestPropertyAt("isConfirmed", index);
  }

  removeGuestAt = index => {
    this.setState({
      guests: [
        ...this.state.guests.slice(0, index),
        ...this.state.guests.slice(index + 1)
      ]
    })
  }

  toggleEditingAt = index => {
    this.toggleGuestPropertyAt("isEditing", index);
  }

  setNameAt = (name, indexToChange) => {
    this.setState({
      guests: this.state.guests.map((guest, index) => {
        if (index === indexToChange) {
          return {
            ...guest,
            name
          };
        }
        return guest;
      })
    })
  }

  toggleFilter = () => {
    this.setState({isFiltered: !this.state.isFiltered })
  }

  handleNameInput = e => {
    this.setState({pendingGuest: e.target.value})
  }

  newGuestSubmitHandler = e => {
    e.preventDefault();
    this.setState({
      guests: [
        {
          name: this.state.pendingGuest,
          isConfirmed: false,
          isEditing: false
        },
        ...this.state.guests
      ],
      pendingGuest: ''
    })
  }

  getTotalInvited = () => this.state.guests.length;

  //getAttendingGuests = () =>
  //getUnconfirmedGuests = ()=>


  render() {
    return (
      <div className="App">
        <header>
          <h1>RSVP</h1>
          <p>A Treehouse App</p>
          <form onSubmit={this.newGuestSubmitHandler} >
            <input 
              type="text"
              onChange={this.handleNameInput} 
              value={this.state.pendingGuest} 
              placeholder="Invite Someone" />
              <button type="submit" name="submit" value="submit">Submit</button>
        </form>
      </header>
          <div className="main">
            <div>
              <h2>Invitees</h2>
              <label>
                <input type="checkbox"
                  onChange={this.toggleFilter}
                  checked={this.state.isFiltered} /> Hide those who haven't responded
          </label>
        </div>
              <table className="counter">
                <tbody>
                  <tr>
                    <td>Attending:</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>Unconfirmed:</td>
                    <td>1</td>
                  </tr>
                  <tr>
                    <td>Total:</td>
                    <td>3</td>
                  </tr>
                </tbody>
              </table>
              <GuestList
                guests={this.state.guests}
                toggleConfirmationAt={this.toggleConfirmationAt}
                toggleEditingAt={this.toggleEditingAt} 
                setNameAt={this.setNameAt}
                isFiltered={this.state.isFiltered}
                removeGuestAt={this.removeGuestAt}
              />
      </div>
    </div>
    );
  }
}

export default App;

import React from 'react';
import PropTypes from 'prop-types';
import Guest from './Guest';


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.toggleEditingAt(index)} 
          setName={text => props.setNameAt(text, index)} 
          handleRemove={props.removeGuestAt(index)}/>

    )}
  </ul>



GuestList.propTypes = {
  guests: PropTypes.array.isRequired,
  toggleConfirmationAt: PropTypes.func.isRequired,
  toggleEditingAt: PropTypes.func.isRequired,
  setNameAt: PropTypes.func.isRequired,
  isFiltered: PropTypes.bool.isRequired,
  removeGuestAt: PropTypes.func.isRequired
}

export default GuestList;

import React from 'react';
import PropTypes from 'prop-types'
import GuestName from './GuestName';
const Guest = props =>
      <li>
        <GuestName 
          isEditing={props.isEditing} 
          handleNameEdits={e => props.setName(e.target.value)} >{props.name}</GuestName>
        <label>
          <input type="checkbox" 
            checked={props.isConfirmed}
            onChange={props.handleConfirmation} /> Confirmed
        </label>
        <button onClick={props.handleToggleEditing} >
      {props.isEditing ? "save" : "edit"}
        </button>
        <button onClick={props.handleRemove} >remove</button>
      </li>



Guest.propTypes = {
  name: PropTypes.string.isRequired,
  isConfirmed: PropTypes.bool.isRequired,
  isEditing: PropTypes.bool.isRequired,
  handleConfirmation: PropTypes.func.isRequired,
  handleToggleEditing: PropTypes.func.isRequired,
  setName: PropTypes.func.isRequired,
  handleRemove: PropTypes.func.isRequired
}

export default Guest;