Problem related to calling functional components in ReactJS

Question

On running the react webpage h1 first is being printed but h1 second is not being printed
Moreover renderDishDetail and renderComments are not being called.
I am new in ReactJS and was learning about functional components. I converted my class component to functional component and since then this problem is occuring.
These are some errors being shown and I am unable to understand why variables are not being used.

Line 21:6: 'comments' is assigned a value but never used no-unused-vars
Line 44:8: 'dish' is assigned a value but never used no-unused-vars

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

function renderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function renderComments(dish){
    console.log("render comments called")
    var comments;
    if(dish==null){
            console.log("DishDetail if");   
            comments = null;
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
            comments = dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                );
            })
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")

    const dishDetail = (dish) => {
        return(
            <div className="row">
                <h1>h1 second</h1>
                <renderDishDetail dish={dish} />
                <renderComments dish={dish} />
            </div>
        );
    }

    return(
            <div className="container">

                <h1>h1 first</h1>
                {dishDetail}
            </div>          
        );
}

export default DishDetail;

Answer 1

Try this and it should work calling.

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

function RenderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function RenderComments(dish){
    console.log("render comments called")
    if(dish){
        console.log("DishDetail if");
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
        return <div>
            {dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                )
            })}
            </div>
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")
    return(
            <div className="container">
            <h1>h1 first < /h1>
                <div className="row">
                <h1>h1 second</h1>
                <RenderDishDetail dish={dish} />
                <RenderComments dish={dish} />
            </div>          
        );
}

export default DishDetail;

Line 21:6: 'comments' is assigned a value but never used no-unused-vars Line 44:8: 'dish' is assigned a value but never used no-unused-vars this is a lint error you have, you have defined comment variable which you have defined in RenderComments but are not using it anywhere in the function(my best guess is you intend to return it, once you do that the error should be gone.)

Also all components in react start with an uppercase be it a functional or a class component(as you can see in the reactstarp library namely Card,CardImg, etc)

Answer 2

dishDetail is a function you haven't called it. Add parentheses after in the render with parameter dish and it should work.

Like so

{dishDetail(dish)}