First of all I am new to react. I have been asked to create a react component called DishDetailComponent.js that will display a dish (one dish) which has an image, title and some description about the dish, this Component will be called from component that will display all dishes and when the user clicks on one of the dishes, the DishDetailComponent will be called and passed some props(the selected dish) so it will display the dish image, title and dish description. I am little bit lost how to put it together. Can anyone help guide to achieve this goal. below are the files:
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './components/MenuComponent' ;
import './App.css';
import { DISHES } from './shared/dishes' ;
//function App()
class App extends Component {
constructor(props) {
super(props) ;
this.state = {
// this dishes object will be passed child component "Menu"
dishes: DISHES
}
}
render() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<Menu dishes={this.state.dishes} />
</div>
);
}
}
export default App;
MenuComponent.js
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
import Dishdetail from 'DishdetailComponent' ;
class Menu extends Component {
constructor(props) {
super(props) ;
this.state = {
//This is implemented to click event to take the dish page
selectedDish : null
}
}
onDishSelect(dish) {
//when user chooses a dish update state to "selectedDish to currebt dish"
this.setState({ selectedDish: dish })
}
// This function renders the selectedDish and displays below
//<div className="row">
// {this.renderDish(this.state.selectedDish)}
//</div>
render() {
// using props keyword we can use to map the array
const menu = this.props.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 col-md-5 m-1">
<Card onClick={ () => this.onDishSelect(dish)}>
<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 className="row">
<Dishdetail />
</div>
</div>
)
}
}
export default Menu;
DishDetailComponent.js
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
class Dishdetail extends Component {
constructor(props) {
super(props) ;
this.state = {
//This is implemented to click event to take the dish page
//selectedDish : null
selectedDish : null
}
}
onDishSelect(dish) {
//when user chooses a dish update state to "selectedDish to currebt dish"
this.setState({ selectedDish: dish })
}
renderDish(dish) {
// make sure the selected dish is an existing dish
if(dish != null) {
return (
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
)
}
else {
return (
<div></div>
);
}
}
// This function renders the selectedDish and displays below
//<div className="row">
// {this.renderDish(this.state.selectedDish)}
//</div>
render() {
return (
<div className="col-12 col-md-5 m-1">
<div className="container">
<div className="row">
{this.renderDish(this.state.selectedDish)}
</div>
</div>
</div>
)
}
}
export default Dishdetail;
Dishes file
export const DISHES =
[
{
id: 0,
name:'Uthappizza',
image: 'assets/images/uthappizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
You just need to pass this.state.selectedDish as a prop to DishDetail component and render it based on prop
<Dishdetail selectedDish={this.state.selectedDish}/>
DishDetail component
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
class Dishdetail extends Component {
renderDish() {
// make sure the selected dish is an existing dish
const dish = this.props.selectedDish
if(dish != null) {
return (
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
)
}
else {
return null;
}
}
render() {
return (
<div className="col-12 col-md-5 m-1">
<div className="container">
<div className="row">
{this.renderDish()}
</div>
</div>
</div>
)
}
}
export default Dishdetail;