Passing two different lists of data for each instance of a child component?

Question

I am new to ReactJS and I am using the react-search npm package: https://www.npmjs.com/package/react-search

I have a page that is rendered to order foods. There are two react-search components, one corresponds to foods you would like to receive today and the other for 'later'. Thus I am passing through the same list of foods to both instances of 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>

The ReactSearch code is as follows:

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>
        )
    }
}

Here I am attempting to pass the new list of foods (selected foods) for each component back to the create order component.

Now the first issue here is that I will get a TyperError: this.props.updateNowOrders is not a function, when I attempt select some orders for later. I appreciate this is bad design. I have tried to separate thee two via try & catch blocks, with e instanceof TypeError... but this does not work.

The second TypeError I am getting is within the order component. When the food list is passed back with those that need to be ordered... I then get TypeError: Cannot set property 'selectedForNow' of undefined. The implementations of the two functions are as follows in the order component:

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

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

};

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

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

Any ideas?

Thanks in advance :)

Answer 1

TyperError: this.props.updateNowOrders

This happens because your property isn't called updateNowOrders but updateFoods, You should probably use the same name, updateOrders for example:

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

TypeError: Cannot set property 'selectedForNow' of undefined

You can read here about setState. It's a method that you should use like this:

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