CODEWITHSUNDEEP
htmljqueryreactjs
DeathNeuron
DeathNeuron

Reputation: 39

TypeError: Cannot read property 'comments' of undefined

The following error shows up when I run my react code: TypeError: Cannot read property 'comments' of undefined. I am trying to eradicate this error but can't do so. Is this because I have not mapped my array correctly or do I need to add in some more code? Please Help!!!!!!! This is my MainComponent file:

import React, { Component} from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { DISHES } from '../shared/dishes';
import Menu from './menucomponent';
import DishDetails from './dishdetail'

class Main extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES,
      selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({
      selectedDish: dishId
    });
  }

  render() {
    return ( 
        <div>
            <Navbar dark color="primary">
                <div className="container">
                    <NavbarBrand href = "/" > Ristorante Con Fusion </NavbarBrand>
                </div>
            </Navbar>
            
            <Menu dishes={this.state.dishes}
                onCick = {(dishId) => this.onDishSelect(dishId)} /> 
                
            <DishDetails dish={
                this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]
            }/>
        </div>
    );
  }
}

export default Main;

This is my DishDetail file:

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

class DishDetail extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const como = this.props.dishes.comments.map((dish) => {
      return ( 
        <div className="container">
            <div key={dish.id}>
                <p>
                    {dish.comment} 
                    <br/> 
                    --{dish.author}, 
                    {
                        new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit'
                        }).format(new Date(Date.parse(dish.date)))
                    } 
                    <br/>
                </p> 
            </div> 
        </div>
      );
    });

    return ( 
         <div>
            <div className="row">
                <div className="col-12 col-md-5 m-1">
                    <Card>
                        <CardImg src={this.props.dish.image}
                                alt={this.props.dish.name}/> 
                        <CardBody>
                            <h3> {this.props.dish.name} </h3> 
                            <CardText>{this.props.dish.description}</CardText> 
                        </CardBody> 
                    </Card> 
                </div> 
                <div className="col-12 col-md-6">
                    <p> Comment </p> 
                    <Media list>{como}</Media> 
                </div> 
            </div> 
        </div>
    );
  }
}

export default DishDetail;

Upvotes: 1

Views: 188

Answers (3)

zahra zamani
zahra zamani

Reputation: 1375

You call the dishes while you must to call the dish

this.props.dish.comments.map

Upvotes: 1

Nathan Mc Grath
Nathan Mc Grath

Reputation: 308

DishDetails is expecting a dishes prop. But in your main component, you are giving DishDetails a dish prop.

DishDetail file:

this.props.dishes.comments.map // here we are referencing 'dishes'

Main file:

DishDetails dish = { // here we are referencing 'dish'
  this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]
}
/>

Using React Prop Types, Typescript or Flow can help you to avoid spelling errors like this in future. PropTypes would be the easiest to get started with for now.

Upvotes: 1

r7r
r7r

Reputation: 1525

I believe your dishes object contains comment array

change with below the line in your render method first line

const como = this.props.dishes && this.props.dishes.comments.map((dish) => {

Upvotes: 2

Related Questions