My version of the React by Example App (with Hooks)

import React, { useState } from "react";
import GuestList from "./GuestList";
import Header from "./Header";
import Counter from "./Counter";
import ConfirmedFilter from "./ConfirmedFilter";

function App() {

  const [guests, setGuests] = useState([]);

  const [isFiltered, setIsFiltered] = useState(false);

  const [pendingGuest, setPendingGuest] = useState("");

  const[id, setId] = useState(0);

  const toggleGuestPropertyAt = (property, id) => {
    setGuests(prevState => prevState.map((guest) => {
      if (id === guest.id) {
        return {
          ...guest,
          [property]: !guest[property]
        }
      }
      return guest;
    }))
  }

  const toggleConfirmationAt = id => {
    toggleGuestPropertyAt("isConfirmed", id);
  }

  const toggleEditingAt = id => {
    toggleGuestPropertyAt("isEditing", id);
  }

  const setNameAt = (name, id) => {
    setGuests(prevState => prevState.map((guest) => {
      if (id === guest.id) {
        return {
          ...guest,
          name
        }
      }
      return guest;
    }));
  }

  const removeGuest = (id) => {
    setGuests(prevState => prevState.filter((guest) => id !== guest.id));
  }

  const toggleFilter = () => {
    setIsFiltered(prevState => !prevState);
  }

  const handleNameInput = e => setPendingGuest(e.target.value);

  const newGuestSubmitHandler = e => {
    e.preventDefault();
    if (pendingGuest) {
      setGuests(prevState => [
        { name: pendingGuest, isConfirmed: false, isEditing: false, id },
        ...prevState
      ]);     
    }
    setId(prevState => prevState + 1);
    setPendingGuest("");
  }

  const attendingGuests = guests.filter(guest => guest.isConfirmed);

  return (
    <div className="App">
      <Header
        pendingGuest={pendingGuest}
        handleNameInput={handleNameInput}
        newGuestSubmit={newGuestSubmitHandler}
      />
    <div className="main">
      <ConfirmedFilter
        toggleFilter={toggleFilter}
        isFiltered={isFiltered}
      />
      <Counter
        total={guests.length}
        attending={attendingGuests.length}
      />
      <GuestList 
        guests={isFiltered ? attendingGuests : guests} 
        toggleConfirmationAt={toggleConfirmationAt}
        toggleEditingAt={toggleEditingAt}
        setNameAt={setNameAt}
        removeGuest={removeGuest}
        pendingGuest={pendingGuest}
      />
    </div>
  </div>
  );
}

export default App;