I'm able to access the object (passed through to this method from props) but I am unable to access the object's data

Question

I have passed the props.selectedDish object into this method from the DishDetail functional component and am able to access the object itself. However, when I try to access the data inside the object, only 'undefined' is printed - how can this be? See DishDetail and RenderDish methods below in addition to the screenshots showing the weird activity going on:

    import {Card, CardBody, CardImg, CardImgOverlay, CardText, CardTitle} from "reactstrap";
import React from "react";
import CardColumns from "reactstrap/es/CardColumns";


function RenderComments(info) {
    console.log('RenderComents', info)
    if (info != null) {
        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        let commentsArray = [];
        console.log(info)
        for (let i = 0; i < info.length; i++) {
            if (info[i] != null) {
                console.log(info)
                commentsArray.push(info.comment);
                commentsArray.push("\n")
                let date = new Date(info.date)
                commentsArray.push("-- " + info.author + ", " + monthNames[date.getMonth() + 1] + ' ' + date.getDay() + ', ' + date.getFullYear())
                commentsArray.push("\n");
            } else {
                console.log('bing')
                return <div></div>
            }

        }
        // info.map((information) => {
        //         if (information != null) {
        //             console.log(information)
        //             commentsArray.push(information.comment);
        //             commentsArray.push("\n")
        //             let date = new Date(information.date)
        //             commentsArray.push("-- " + information.author + ", " + monthNames[date.getMonth() + 1] + ' ' + date.getDay() + ', ' + date.getFullYear())
        //             commentsArray.push("\n");
        //         } else {
        //             console.log('bing')
        //             return <div></div>
        //         }
        //     });
        if (commentsArray != null) {
            return (
                <div>
                    <h4> Comments </h4>
                    <p1>{commentsArray.map((line) => {
                        console.log(line)
                        return <p>{line}</p>
                    })}
                    </p1>
                </div>
            )
        } else {
            return <div></div>
        }


    }

}

const DishDetail = (props) => {
    console.log('DishDetail', props)
    if (props.selectedDish != null) {
        return (
            <div className={'row'}>
                <div className={"col-12 col-md-5 m-1"}>
                    <RenderDish dish={props.selectedDish}/>
                    <RenderComments info={props.selectedDish.comments}/>
                </div>
            </div>
        )
    } else {
        return (<div></div>)
    }
}


function RenderDish(dish) {
    console.log('RenderDish', dish)
    // Props is the saved state from the constructor (from the app.js file which
    // gave the DISHES data to the menu component, (which imported it from
    // the DISHES.js file)).
    console.log(dish.comments)
    console.log(dish.name)

    return (

            <Card key={dish.id}>
                <CardImg top src={dish.image} alt={dish.name}/>
                <CardBody>
                    <CardTitle> <b>{dish.name}</b> </CardTitle>
                    <CardText> {dish.description} </CardText>
                </CardBody>
            </Card>

    );
}

export default DishDetail;

Notice the undefined returns from the console.logs but the full dish object showing in the console.log above!

Answer 1

function RenderDish(dish) {

All the props you pass to the component will be passed into dish in the above case.

function RenderDish({ dish }) {

So if you destructure the props like shown above, you'll get actual value you are looking for

Try the following in your RenderDish component.

function RenderDish({ dish }) {
    console.log('RenderDish', dish)

    console.log(dish.comments)
    console.log(dish.name)

//rest of the code
}

Below is another way of accessing if don't want to use the destructuring

function RenderDish(props) {

function RenderDish(props) {
    const { dish } = props;
    console.log('RenderDish', dish)

    console.log(dish.comments)
    console.log(dish.name)

//...rest of the code

Answer 2

It should be info.info. As the info is essentially props that will have an info property with the info array as can be seen in the console.

Better, destructure out the info from props in the RenderComments Component.

function RenderComments({info}) {
  ...
}

You'll have to do the same for the RenderDish:

function RenderDish({dish}) {
    ...
}