TypeError: comments.map is not a function ReactJs

Question

I have already read the previous posts regarding this issue on stack overflow.So I know this issue is coming when you are not passing an array to deal with map function.But the problem is I already used a console.log() to check whether my passing variable is an array or not but it's already an array.Somehow I managed to solve this by changing comments to {comments} in the DishDetail function.But I need to know why I need to do an change like that to solve this issue.

This function will pass the comments array to RenderComments() function.

const DishDetail =(props)=> {
        let comments = null;

        if (props.dish != null) {
            const com = props.dish.comments;
            console.log("thse are comments",props.dish.comments);//Here I am getting an array as output
            comments = <RenderCommnets comments={com}/>//This is the line which pass the comments array to RenderComments() function (Please see the below code )
        }
        return (
            <div className="container">
                <div className="row">
                    <div className="col-12 col-md-5 m-1">
                       <RenderDish dish={props.dish}/>
                    </div>
                    <div className="col-12 col-md-5 m-1 pl-0">
                        {comments}
                    </div>

                </div>
            </div>);

    }

 const RenderCommnets=(comments)=> {//In here if I change this functions parameters to -->{comments} then it will work fine 
        if (comments != null) {
            let commentsArr = comments.map(comment => {
                return (
                    <li key={comment.id}>
                        <div>
                            {comment.comment}
                        </div>
                        <br></br>
                        <div>
                            <span> -- {comment.author} , {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(Date.parse(comment.date)))}</span>
                        </div>
                        <br></br>
                    </li>
                )
            })
            return (<Card className="border-0">

                <CardTitle><h4 className="my-2 pl-3">Comments</h4></CardTitle>

                <CardBody>


                    <CardText><ul className="list-unstyled ">{commentsArr}</ul></CardText>
                </CardBody>
            </Card>);
        } else {
            return (<div></div>)
        }
    }

Sample dish object (For better understanding)

{
        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"
            }
        ]                        },
        {
        id: 1,
        name:'Zucchipakoda',
        image: 'assets/images/zucchipakoda.png',
        category: 'appetizer',
        label:'',
        price:'1.99',
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
        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"
            }
        ]
        },

Answer 1

Issue is this props passes as object. Either destructure your props or use object notation. i.e like this:

const RenderCommnets=({comments})=> {

Answer 2

const RenderCommnets = (comments) =>

You may have called the parameter "comments", but it's actually the entire props object. You only care about a single property on that object. So you either need to do this:

const RenderCommnets = (props) => {
  const comments = props.comments;

Or you need to use destructuring as a shorthand for the same thing (this is the version you stumbled on):

const RenderCommnets = ({ comments }) => {