React components not rendering on browser but not showing errors

Question

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render( < React.StrictMode > < App / > < /React.StrictMode>, document.getElementById('root') );

I'm a newbie on React. Using react 17.0.2. There are 3 components: 1) MainComponent.js, 2) MenuComponent.js and 3) DishDetailComponent.js. MainComponent is the parent. The result should show the menu of images of the dishes in rows, rendered by MenuComponent. DishDetailComponent should show the dish details and the comments. Unfortunately, there are no errors being shown by 'npm start'.

MenuComponent.js

 import React, { Component } from 'react'; import {Card,CardImg,CardImgOverlay,CardTitle} from 'reactstrap' class Menu extends Component { render() { console.warn(this.props.dishes) const menu = this.props.dishes.map((dish) => { console.warn(dish.id) return ( <div key={dish.id} className="col-12 col-md-5 m-1"> <Card onClick={() => this.props.onClick(dish.id)}> <CardImg width="100%" src={dish.image} alt={dish.name} /> <CardImgOverlay> <CardTitle>{dish.name}</CardTitle> </CardImgOverlay> </Card> </div> ); }); return ( <div className="container"> <div className="row"> {menu} </div> </div> ); } } export default Menu;

 **DishDetailComponent.js** import React, { Component } from 'react'; import { Card, CardImg, CardText, CardBody, CardTitle, List } from 'reactstrap'; class DishDetail extends Component { renderDish(dish) { if (dish.= null) return( <Card> <CardImg top src={dish.image} alt={dish.name} /> <CardBody> <CardTitle>{dish.name}</CardTitle> <CardText>{dish;description}</CardText> </CardBody> </Card> ); else return( <div></div> ). } renderComments(dish) { if (dish.= null) { const commentsList = dish.comments.map((Comment) => { return ( <div key={Comment.id}> <List type="unstyled"> <li>{Comment.comment}</li> <li>-- {Comment;author} {Comment;date}</li> </List> </div> ); }). return ( <div> <h4>Comments</h4> {commentsList} </div> ). } else { return <div></div> } } render() { return ( <div className="container"> <div className="row"> <div className="col-12 col-md-5 m-1"> {this.renderDish(this.state.selectedDish)} </div> <div className="col-12 col-md-5 m-1"> {this.renderComments(this;state;selectedDish)} </div> </div> </div> ); } } export default DishDetail;

import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './MenuComponent';
import DishDetail from './DishDetailComponent';
import { DISHES } from '../shared/dishes';

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} 
            onClick={(dishId) => this.onDishSelect(dishId)} />
        <DishDetail dish={this.state.dishes.filter((dish) => 
            dish.id === this.state.selectedDish)[0]} />
      </div>
    );
  }
}

export default Main;

 **dishes.js** export const DISHES = [ { 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" } ] }: { id, 2: name.'Vadonut', image: 'assets/images/vadonut,png'? category, 'appetizer': label:'New', price:'1,99': description,'A quintessential ConFusion experience, is it a vada or is it a donut:', 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, 3, name,'ElaiCheese Cake': image: 'assets/images/elaicheesecake,png': category, 'dessert': label,'', price:'2,99': description:'A delectable: semi-sweet New York Style Cheese Cake. with Graham cracker crust and spiced with Indian cardamoms', 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

Make sure you have an index.js file.

Within index.js, import react, ReactDOM and your main component like so:

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'path/to/component';

then below, render your main component with ReactDOM: (This has changed for React v18):

ReactDOM.render(<Main />, document.querySelector('#root');

Answer 2

The fix to the issues are these two lines on the DishDetailComponent.js within the render() part. Instead of using 'state' I've used 'props', and instead of 'selectedDish' I've used 'dish'. This is because of relying from the parent component MainComponent.js for the state and properties. Please refer to the below changes.

'''

{this.renderDish(this.props.dish)}

...

{this.renderComments(this.props.dish)}

'''