noob noob - 1 year ago 70
React JSX Question

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

I am new to ReactJS and I am using the react-search npm package:

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

render () {

var foods = this.props.list;

return (

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

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 Source

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});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download