하위 구성 요소의 각 인스턴스에 대해 두 가지 다른 데이터 목록을 전달합니까?

저는 ReactJS를 처음 사용하고 react-search npm 패키지를 사용하고 있습니다 : https://www.npmjs.com/package/react-search

음식을 주문하기 위해 렌더링되는 페이지가 있습니다. 두 가지 반응 검색 구성 요소가 있습니다. 하나는 오늘 받고 싶은 음식에 해당하고 다른 하나는 '나중에'에 해당합니다. 따라서 동일한 음식 목록을 reactSearch의 두 인스턴스에 전달합니다.

<label> Add for now: </label>
<ReactSearch list={foods} updateFoods={this.updateNowOrders}></ReactSearch>
<label> Add for later: </label>
<ReactSearch list={foods} updateFoods={this.updateLaterOrders}></ReactSearch>

ReactSearch 코드는 다음과 같습니다.

import Search from 'react-search'
import ReactDOM from 'react-dom'
import React, { Component, PropTypes } from 'react'

export default class ReactSearch extends Component {

    update(foods) {
        this.props.updateNowOrders(foods);
        this.props.updateLaterOrders(foods);      
    }

    render () {

        var foods = this.props.list;

        return (
        <div>

            <Search foods={foods}
                    placeholder='Search foods'
                    maxSelected={}
                    multiple={true}
                    onItemsChanged={this.update.bind(this)} />
        </div>
        )
    }
}

여기서는 각 구성 요소에 대한 새로운 음식 목록 (선택된 음식)을 주문 생성 구성 요소로 다시 전달하려고합니다.

이제 여기서 첫 번째 문제는 TyperError 가 발생한다는 것입니다 . this.props.updateNowOrders 는 나중에 일부 주문을 선택하려고 할 때 함수가 아닙니다. 나는 이것이 나쁜 디자인이라는 것에 감사합니다. 나는 e instanceof TypeError로 try & catch 블록을 통해 두 개를 분리하려고 시도했지만 작동하지 않습니다.

내가 얻는 두 번째 TypeError는 주문 구성 요소 내에 있습니다. 주문해야하는 음식 목록이 다시 전달되면 TypeError : Cannot set property 'selectedForNow'of undefined. 두 함수의 구현은 주문 구성 요소에서 다음과 같습니다.

constructor(props, context) {
    super(props, context);

    this.state = {
        foods: [],
        selectedForNow: [],
        selectedForLater: []
    };

};

updateSelectedForNow(data) {         
    this.setState.selectedForNow = data;
}

updateSelectedForLater(data) {     
    this.setState.selectedForLater = data;    
}

어떤 아이디어?

미리 감사드립니다 :)