react rsvp question

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

class App extends Component {

  state = {
    pendingGuest:"",
    isFiltered: false,
    guests:[
      {
        name:"Treasure" ,
        isConfirmed:false,
        isEditing:false
      },
      {
        name:"Nick",
        isConfirmed:true,
        isEditing:false
      },
      {
        name:"Baltasar",
        isConfirmed:true,
        isEditing:false
      }
    ]
  };

getTotalInvited = () => this.state.guests.length;
getAttendingGuest = () => this.state.guests.reduce((total,guest) => guest.isConfirmed ? total+1 : total,0);


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

}

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

}

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

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

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

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:""
  });
}

  render() {
    const totalInvited = this.getTotalInvited();
    const numberAttending = this.getAttendingGuest();
    const numberUnconfirmed = totalInvited - numberAttending;
    return (
      <div className="App">
      <header>
        <h1>SUPYO!</h1>
        <p>A BKFWEBDEV 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>
        <Counter totalInvited = {totalInvited} numberAttending = {numberAttending} numberUnconfirmed = {numberUnconfirmed}/>
       <GuestList
       guests = {this.state.guests}
       toggleConfirmationAt ={this.toggleConfirmationAt}
       toggleEditingAt = {this.toggleEditingAt}
       setNameAt = {this.setNameAt}
       isFiltered = {this.state.isFiltered}
       removeGuestAt = {this.removeGuestAt}
       pendingGuest = {this.state.pendingGuest}
       />
      </div>
    </div>
    );
  }
}

export default App;

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

const GuestList = props => 
<ul>
  <PendingGuest name = {props.pendingGuest}/>
{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,
    pendingGuest:PropTypes.string.isRequired
  }

export default GuestList;