Input Form Does Not Clear

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

import Header from './Header'
import MainContent from './MainContent'

class App extends Component {

  state = {
    isFiltered: false,
    pendingGuest: "",
    guests: [
      {
        name: "Patrick",
        isConfirmed: false,
        isEditing: false
      },
      {
        name: "Sloane",
        isConfirmed: true,
        isEditing: false
      },
      {
        name: "Natasha",
        isConfirmed: true,
        isEditing: false
      }
    ]
  }

  toggleGuestPropertyAt = (property, indexToChange) =>
    this.setState((prevState) => {
      return {
        guests: prevState.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((prevState) => {
      return {
        guests: prevState.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 })

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

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

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

  render() {
    const totalInvited = this.getTotalInvited();
    const numberAttending = this.getAttendingGuests();
    const numberUnconfirmed = totalInvited - numberAttending;

    return (
      <div className="App">
        <Header 
          handleAddNewGuest={this.handleAddNewGuest}
          handleNameInput={this.handleNameInput}
          pendingGuests={this.state.pendingGuests}
        />
        <MainContent 
          toggleFilter={this.toggleFilter}
          isFiltered={this.state.isFiltered}
          totalInvited={totalInvited}
          numberAttending={numberAttending}
          numberUnconfirmed={numberUnconfirmed}
          guests={this.state.guests} 
          toggleConfirmationAt={this.toggleConfirmationAt}
          toggleEditingAt={this.toggleEditingAt}
          setNameAt={this.setNameAt}
          removeGuestAt={this.removeGuestAt}
          pendingGuest={this.state.pendingGuest}
        />
    </div>
    );
  }
}

export default App;

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

import Form from './Form'

const Header = props =>
  <header>
    <h1>RSVP</h1>
    <p>An Invitation App</p>
    <Form
      addNewGuest={props.handleAddNewGuest}
      nameInput={props.handleNameInput}
      pendingGuests={props.pendingGuests}
    />
  </header>

  Header.propTypes = {
    handleAddNewGuest: PropTypes.func.isRequired,
    handleNameInput: PropTypes.func.isRequired,
    pendingGuests: PropTypes.string.isRequired
  }

  export default Header

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

const Form = props => 
  <form onSubmit={props.addNewGuest}>
    <input 
      type="text"
      onChange={props.nameInput}
      value={props.pendingGuest}
      placeholder="Invite Someone"
      />
    <button type="submit" name="submit" value="submit">Submit</button>
  </form>


  Form.propTypes = {
    addNewGuest: PropTypes.func.isRequired,
    nameInput: PropTypes.func.isRequired,
    pendingGuest: PropTypes.string.isRequired
  }

export default Form;