not getting value in total

import React, { Component } from 'react';
import Guestlist from './GuestList';
import Counter from './Counter';



class App extends Component {

  state = {
    isFiltered: false,
    pendingGuest: "",
    guest: [
      {
        name: 'Treasure',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Nic',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Rohit',
        isConfirmed: false,
        isEditing: false
      }
    ]
  };

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

  toggleConfirmationAt(i){
    this.toggleGuestPropertyAt("isConfirmed",i);
  }

  removeGuest(i){
    this.setState({
      guest: [
         ...this.state.guest.slice(0,i),
         ...this.state.guest.slice(i + 1)
      ]
    });
  }

  toggleEditingAt(i){
    this.toggleGuestPropertyAt("isEditing",i);
  }

  setNameAtApp(name,indexToChange) {
    this.setState({
      guest: this.state.guest.map((guestname,i) => {
        if(i === indexToChange){
          return{
            ...guestname,
            name:name
          };
        }
        else{
          return guestname;
        }
      })
    });
  }

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

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

  newGuestSubmit(e){
    e.preventDefault();
    this.setState({
      guest: [
        {
          name:this.state.pendingGuest,
          isConfirmed: false,
          isEditing: false
        },
        ...this.state.guest
      ],
      pendingGuest: ""
    });
  }

   getTotalInvited() {
     this.state.guest.length;
   }
    getAttendingGuests(){
      this.state.guest.reduce(
        (total,guest) => guest.isConfirmed ? total+1 : total,
        0
      );
    }
   // getConfirmedGuests = () =>
    render() {
      const totalInvited = this.getTotalInvited();
      const numberAttending = this.getAttendingGuests();
      const numberUnconfirmed = totalInvited-numberAttending;
     return (
      <div className="App">
            <header>
              <h1>RSVP</h1>
              <p>A Treehouse App</p>
              <form onSubmit={this.newGuestSubmit.bind(this)}>
                  <input type="text"
                         onChange={this.handleNameInput.bind(this)}
                         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.bind(this)}
                  checked={this.state.isFiltered}/> Hide those who haven't responded
              </label>
            </div>

               <Counter
                 totalInvited={totalInvited}
                 numberAttending={numberAttending}
                 numberUnconfirmed={numberUnconfirmed} />

               <Guestlist
                 guests={this.state.guest}
                 toggleConfirm={this.toggleConfirmationAt.bind(this)}
                 toggleEditing={this.toggleEditingAt.bind(this)}
                 setNameAt={this.setNameAtApp.bind(this)}
                 isFilteredList={this.state.isFiltered}
                 removeGuestList={this.removeGuest.bind(this)} />

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

export default App;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
  render(){

    return(
      <table className="counter">
        <tbody>
          <tr>
            <td>Attending:</td>
            <td>{this.props.numberAttending}</td>
          </tr>
          <tr>
            <td>Unconfirmed:</td>
            <td>{this.props.numberUnconfirmed}</td>
          </tr>
          <tr>
            <td>Total:</td>
            <td>{this.props.totalInvited}</td>
          </tr>
        </tbody>
      </table>
    );
    }
  }

  Counter.propTypes = {
    numberAttending: PropTypes.number,
    numberUnconfirmed: PropTypes.number,
    totalInvited: PropTypes.number
  };

export default Counter;