TypeError: Cannot read property 'map' of undefined

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

class App extends Component {

  state = {
    guests: [
      {
        name: 'Treasure',
        isConfirmed: false,
      },
      {
        name: 'Nic',
        isConfirmed: true,
      },
      {
        name: 'Matt K',
        isConfirmed: false,
      }
    ]
  }

  toggleConfirmationAt = indexToChange =>
    this.setState({
      guests: this.state.quests.map((guest, index) => {
        if (index === indexToChange) {
          return {
            ...guest,
            isConfirmed: !guest.isConfirmed
          };
        }
        return guest;
      })
    });

  getTotalInvited = () => this.state.guests.length;
  // get AttendingGuests = () =>
  // getUnconfirmedGuests = () =>

  render() {
    return (
    <div className="App">
      <header>
        <h1>RSVP</h1>
        <p>A Treehouse App</p>
        <form>
            <input type="text" value="Safia" 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" /> 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}
        />

      </div>
    </div>
    );
  }
}

export default App;

import React from 'react';
import PropTypes from 'prop-types';

import Guest from './Guest';

const GuestList = props => 
    <ul>
        {props.guests.map((guest, index) =>
            <Guest
                key={index}
                name={guest.name}
                isConfirmed={guest.isConfirmed} 
                handleConfirmation={() => props.toggleConfirmationAt(index)} />
        )}
    </ul>;

GuestList.propTypes = {
    guests: PropTypes.array.isRequired,
    toggleConfirmationAt: PropTypes.func.isRequired
}

export default GuestList;

import React from 'react';
import PropTypes from 'prop-types';

const Guest = props => 
    <li>
        <span>{props.name}</span>
        <label>
            <input
                type="checkbox"
                checked={props.isConfirmed} 
                onChange={props.handleConfirmation} /> Confirmed
        </label>
        <button>edit</button>
        <button>remove</button>
    </li>

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

export default Guest;