Skip to content

Instantly share code, notes, and snippets.

@Tunji545
Last active Oct 26, 2020
Embed
What would you like to do?
import React, { Component } from "react";
import { Card, CardImg, CardImgOverlay, CardTitle } from "reactstrap";
import DishDetail from "./DishdetailComponent";
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
selectedDish: null,
selectedComment: null
}
this.onDishSelect = this.onDishSelect.bind(this);
this.renderDish = this.renderDish.bind(this);
this.renderCommments = this.renderComments.bind(this);
}
onDishSelect(dish, dishComments) {
this.setState({
selectedDish: dish,
selectedComment: dishComments
})
console.log(dish, dishComments);
}
renderDish(dish) {
if(dish != null) {
console.log(dish);
return(
<DishDetail dish={this.state.selectedDish} />
)
}
else {
return (
<div></div>
)
}
}
renderComments(dishComments) {
if(dishComments !== null) {
return (
<DishDetail comments={this.state.selectedComment} />
)
}
else {
return (
<div></div>
)
}
}
render() {
const menu = this.props && this.props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1">
<Card key={dish.id} onClick={() => this.onDishSelect(dish, dish.comments)}>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
)
})
return (
<div className="container">
<div className="row">
{menu}
</div>
<div>
{this.renderDish(this.state.selectedDish)}
{this.renderComments(this.state.selectedComment)}
</div>
</div>
)
}
}
export default Menu;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment