Error:RenderComments(...) Nothing was returned from render. This usually means a return statement is-CodePudding

I have 2 functions in a functional component DishDetails.js first is RenderDish() and second RenderComment()
I am new at functional component so please bear with me..
I have also uploaded my code to codesandbox please refer to it:
https://codesandbox.io/s/upbeat-sky-d6gb9?file=/src/components/DishDetails.js

I was able to successfully render the RenderDish() Function
But I am having problem with the RenderComment() function

Given below is code for DishDetails.js

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

function RenderDish({ dish }) {
  if (dish != null) {
    // console.log(dish.comments[0].comment);
    return (
      <Card>
        <CardImg width="100%" src={dish.image} alt={dish.name} />
        <CardBody>
          <CardTitle tag="h5">{dish.name}</CardTitle>
          <CardText>{dish.description}</CardText>
        </CardBody>
      </Card>
    );
  } else {
    return <div></div>;
  }
}

function RenderComments({ comments }) {
  if (comments != null) {
    const commentItems = comments.comments.map((item) => {
      return (
        <div key={item.id}>
          <h4>Comments</h4>
          <ul className="list-unstyled">
            <li>{item.comment}</li>
            <li>
              --{item.author}{" "}
              {new Intl.DateTimeFormat("en-US", {
                year: "numeric",
                month: "short",
                day: "2-digit"
              }).format(new Date(Date.parse(item.date)))}
            </li>
          </ul>
        </div>
      );
    });
    return commentItems;
  }
}
const DishDetails = (props) => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12 col-sm-12 col-md-5 m-1">
          <RenderDish dish={props.dish} />
        </div>
        <div className="col-12 col-sm-12 col-md-5 m-1">
          <RenderComments comments={props.comments} />
        </div>
      </div>
    </div>
  );
};
export default DishDetails;

Although I think have passed the props parameters properly into RenderComment() properly but when I am calling RenderComments below in DishDetails function I am having the above error

I think there is some kind of problem with props in RenderComments(). The object and their properties are there in sharded folder inside dishes.js in codesandbox
I have also provided Expected output link
https://jy493.csb.app/

Help would be appreciated!!

CodePudding user response：

your comments are null so you need to return something in a fallback else clause:

function RenderComments({ comments }) {
  if (comments != null) {
    const commentItems = comments.comments.map((item) => {
      return (
        <div key={item.id}>
          <h4>Comments</h4>
          <ul className="list-unstyled">
            <li>{item.comment}</li>
            <li>
              --{item.author}{" "}
              {new Intl.DateTimeFormat("en-US", {
                year: "numeric",
                month: "short",
                day: "2-digit"
              }).format(new Date(Date.parse(item.date)))}
            </li>
          </ul>
        </div>
      );
    });
    return commentItems;
  } else {
    return <div>foobar</div>
  }
}