Listing 6-55: Adding Methods and Binding Them to App

import {Component} from 'react';
import InputForm from './InputForm';
import FilterSelect from './FilterSelect';
import RemindersList from './RemindersList';

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      reminders:undefined,
      userInput:undefined,
      selectedFilter:"all"
    }
    this.setUserInput = this.setUserInput.bind(this);
    this.setSelectedFilter = this.setSelectedFilter.bind(this);
    this.addNewReminder = this.addNewReminder.bind(this);
    this.setIsComplete = this.setIsComplete.bind(this);
  }

  setUserInput(newInput){
    this.setState({userInput:newInput});
  }
  
  setSelectedFilter(newFilter){
    this.setState({selectedFilter:newFilter});
  }

  addNewReminder(itemToAdd) {
    if (this.state.reminders===undefined){
      this.setState({reminders:[itemToAdd]});
    } else {
      this.setState((current)=>{
        return (
          {
            reminders:[...current.reminders,itemToAdd]
          }
          )
      });    
    }
  }  

  setIsComplete(isComplete,index){
    const newReminders = [ ...this.state.reminders.slice(0, index),
                     {...this.state.reminders[index],isComplete}, 
                     ...this.state.reminders.slice(index+1) ];
    this.setState({reminders:newReminders});
  }

  render(){
    return(
      <div>
        <InputForm userInput={this.state.userInput} 
                   setUserInput={this.setUserInput}
                   addNewReminder={this.addNewReminder} />
        <FilterSelect selectedFilter={this.state.selectedFilter} 
                      setSelectedFilter={this.setSelectedFilter} />
        <RemindersList reminders={filteredList} setIsComplete={this.setIsComplete} />
      </div>
    );
  }
}

export default App;