pri pri - 6 months ago 7
Node.js Question

Undefined error inside function of Order component

I have developed a page which contains a single recipe page and there is an order button. When order button is clicked the order of that recipe should be shown along with the price just side of recipe section. But I get sorry recipe no longer available. In the render section inside Order Component i get an id of order. But why i get an undefined error inside renderOrder function(this.props.order[key] and this.props.recipe[key]). Why is that so?

export default class SingleRecipe extends Component {
constructor(){
super();
this.state = { order: {} };
}

getMeteorData(){
let data = {};
let recipehandle = Meteor.subscribe('singlerecipe',this.props.slug);
if(recipehandle.ready()){
data.recipe = Recipes.findOne({_id:this.props.slug});
}
return data;
}


addToOrder(key){
this.state.order[key] = this.state.order[key]+1 || 1;;
this.setState({
order:this.state.order
});
}

render() {
const {recipe}=this.data;
const {order}=this.state;
return (
<div className="container">
<div className="row">
<div className="col s6">
{recipe.nameOfRecipe}
</div>
<div className="col s6">
<Order order={order} recipe={recipe} removeFromOrder = {this.removeFromOrder} />
</div>
</div>
</div>
);
}
}


export default class Order extends Component {
renderOrder(key){
let order = this.props.order[key];
let recipe = this.props.recipe[key]; // get undefined
let removeButton = <button onClick={this.props.removeFromOrder.bind(this,key)}>&times;</button>;
if(!recipe){
return <li key={key}>Sorry, recipe no longer available! {removeButton}</li>
}

return(
<li key={key}>
<span>
<CSSTransitionGroup component="span" transitionName="count" transitionLeaveTimeout={250} transitionEnterTimeout={250} className="count">
<span key={count}>{count}</span>
</CSSTransitionGroup>
{recipe.nameOfRecipe}{removeButton}
</span>
</li>
)
}
render() {
let orderId = Object.keys(this.props.order); // returns the id
return (
<div className="order-wrap">
<h2 className="order-title">Your Order</h2>
<CSSTransitionGroup
className="order"
component="ul"
transitionName="order"
transitionEnterTimeout={100}
transitionLeaveTimeout={500}
>
{orderId.map(item=>this.renderOrder(item))}
</CSSTransitionGroup>

</div>
);
}
}

Answer

changing this.props.recipe[key] to this.props.recipewill work.

Comments