Getting details of a single item from a json list using a new details component in React

Question

I am new to React and I am facing a issue to get item details when an item is clicked in React from an another Details component. I have MenuComponent.js which is supposed to call the DishDetailComponent.js when any of the card is clicked, however I am getting an error in my dish detail component when I do

 const DishDetail = this.props( (selectedDish)=> { })

that the this.props is not a function. Here is the code from Menu Component used to call the DishDetail Component

import React, { Component } from 'react';
import { Media } from "reactstrap";
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";
import DishDetail from './DishDetailComponent.js';

class Menu extends Component {
  constructor(props) {
     super(props);
     this.state = {
        selectedDish: null
     };
  }

  onDishSelect(dish) {
     this.setState({selectedDish: dish})
  }


  render() {
     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>
                        <p>{dish.description}</p>
                    </CardImgOverlay>
                </Card>
            </div>
        );
    });
    return(
        <div className="container">
            <div className="row">
                {menu}
            </div>
            <div className="row">
                <DishDetail selectedDish={this.state.selectedDish}/>
            </div>
        </div>
    );
  }
}

export default Menu;

And here is my DishDetail Component that is giving me problems

import  React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";

class DishDetail extends Component{
   constructor(props) {
     super(props);
   }

 render() {
     const DishDetail = this.props( (selectedDish)=> {
         if (selectedDish != null) {
             return (
                 <Card>
                     <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                     <CardBody>
                         <CardTitle>{selectedDish.name}</CardTitle>
                         <CardText>{selectedDish.description}</CardText>
                     </CardBody>
                 </Card>
             )
         } else {
             return (
                 <div></div>
             );
         }
     });

     return (
         <div className="container">
             <div className="row">
                 {DishDetail}
             </div>
         </div>
     )
   }
 }

 export default DishDetail;

Thanks

Answer 1

This should works:

import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
'reactstrap';

class DishDetail extends Component{
    constructor(props) {
      super(props);
    }

    renderDish(dish) {
        if (dish != null)
            return(
                <Card>
                    <CardImg top src={dish.image} alt={dish.name} />
                    <CardBody>
                      <CardTitle>{dish.name}</CardTitle>
                      <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            );
        else
            return(
                <div></div>
            );
    }

    render() {

        return (
            <div className="container">
                <div className="row">
                    {this.renderDish(this.props.selectedDish)}
                </div>
            </div>
        )

    }
}

export default DishDetail;

Answer 2

this.props is not a function, it is an object. Try to write your DishDetail like that.

 import React, { Component } from 'react'; import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap"; class DishDetail extends Component{ constructor(props) { super(props); } render() { const { selectedDish } = this.props; const DishDetail = () => { if (selectedDish) { return ( <Card> <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} /> <CardBody> <CardTitle>{selectedDish.name}</CardTitle> <CardText>{selectedDish.description}</CardText> </CardBody> </Card> ) } return ( <div /> ); } return ( <div className="container"> <div className="row"> {DishDetail} </div> </div> ) } } export default DishDetail;

Answer 3

import  React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";

const DishDetail = ({ selectedDish }) => {
    return (
        <div className="container">
            <div className="row">
                { selectedDish &&
                    <Card>
                        <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                        <CardBody>
                            <CardTitle>{selectedDish.name}</CardTitle>
                            <CardText>{selectedDish.description}</CardText>
                        </CardBody>
                    </Card>
                }
            </div>
        </div>
    )
};

export default DishDetail;

The purpose of this component is to display information, so the functional component is a better choice here (instead of the class), but there is no restriction on this, just a recommendation. Try to walk through the code and understand it, do not worry to ask questions if there are any..