Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

260
Visualizações
Uncaught TypeError: Cannot read properties of undefined (reading 'comments')

Following is my Dishdetail component in reactjs. It receives props from its parent component and and has a child component named "RenderComments" which renders the comments from the props.

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



    function RenderDish({dish}) {
        if (dish != null) {
            return (
                <Card>
                    <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>
                    <CardBody>
                        <CardTitle>{dish.name}</CardTitle>
                        <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            )
        }
        else {
            return (
                <div></div>
            )
        }
    }

    function RenderComments({comments}) {
        let c = [];
        if (comments != null) {
            c = comments.map((element) => {
                return (
                    <li key={element.id}>
                        <p>{element.comment}</p>
                        <p>-- {element.author}, {new Date(element.date).toLocaleDateString("en-us", { year: "numeric", month: "short", day: "2-digit" })}</p>
                    </li>

                )
            });
        }

        return (
            <div>
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    {c}
                </ul>
            </div>
        )
    }
    
    const Dishdetail =(props)=>{
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-12 col-md-5 m-1">
                        <RenderDish dish={props.dish}/>
                    </div>
                    <div className="col-xs-12 col-md-5 m-1">
                        <RenderComments comments={props.dish.comments}/>
                    </div>

                </div>
            </div>

        )
    }


export default Dishdetail;

I get this error:"Uncaught TypeError: Cannot read properties of undefined (reading 'comments')"

Since I am a beginner I do not know how to fix this error. Can please someone guide me? Also I would be glad if someone could specify the reason for this error

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

please use optional chaining and inspect why comment comes undefined.

comments?.map(() => {
})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda