These Codes throws Errors whenever I clicked on an image in a React Project

JavaScript
1

The codes run and displays correctly on the web whenever I run it but throws two different errors when I clicked on any of the images. Details of the errors are also linked below. Please help me solve these errors and explain why I am getting these errors.

2

A demo would be great for easier debugging, since it seems that you have linked MenuComponent twice.

However as initial suggestion I would check your logic of DishDetail.
You are creating two components:

 <DishDetail dish={this.state.selectedDish} />
 <DishDetail comments={this.state.selectedComment} />

So the first one will have dish={} comments=undefined
and the scond one dish=undefined comments={}

Which is very error prone.
Hope this helps :slight_smile:

3

Oh, I 'm beginning to see how these errors is being created. I never new both dish and comment will be undefined from those two Components. Please how do I correct this and thanks for your quick response.

4

I think the main issue here is understanding DishDetail component.
Does it really need both dish and comments prop?

By the look of it seems more it is just displaying a generic data, doing so will make the component more general and easier to reason about.

Or if not simply check if either props are defined before attempting to map on them, ore use a default prop :slight_smile:

5

Yes, it is using a generic data but this is also a task I was given with some steps I must follow. I am just trying to follow the instruction given to use the RenderDish() to display the details about the dish selected and the renderComment() method to display the details about the comment. And the instructor also mandated me to use dish props for the dish aspect and comment props for the comment aspect.
I am still new to React and programming generally and I think probably this is how far I am able to go as at now. Been on this error for the past three days.

6

I think it should probably be enough to check that the properties are actually there before attempting any render:

function DishDetail({dish, comments}) {
 return (
<div>
{dish ? dish.map([....]) : "No dish, sorry"}
{comments ? comments.map([...]) : "No comments for now"} 
</div>
)
}
7

Hello, thanks a lot. I know the suggestion will work but I am really confused right now. I don’t know where exactly to place the code. Please, kindly point out where I should place it. Thanks for your patience.

8

My code is not “The” solution, but merely a suggestion.

The error is happening because you are calling map on an undefined element.
in your specific case:

this.props.comments.map

This error will break your app if comments is undefined.

And you have a case of undefined comments prop when you mount this component

  renderDish(dish) {
    if(dish != null) {
      console.log(dish);
      return(
        <DishDetail dish={this.state.selectedDish} />
      )
    }

As you can see, you are rendering a DishDetail component that has no comments props.
This is causing the error.

How you handle is up to you, and is not really related to React itself.
Looking at your logic you are only checking that dish is defined before rendering that component, but what about comments?

Hope this enlightens thing up a bit more :slight_smile:

9

Alright sir. I perfectly understands you and I know you know about what you are saying. I will try implementing your advise soon. I have been off for a while. Once again, thanks for the clues.