0

I was working on this react application and after adding a new component DishDetail to my existing component Menu, somehow the super(props) stopped working and it is now showing a strikethrough and when i start my react app in yarn, it shows error that props are not passed.

Menu Component

import React, { Component } from 'react'
import DishDetail from './DishdetailComponent'
import { Card, CardImg, CardImgOverlay, CardText, CardBody,
    CardTitle } from 'reactstrap';

class Menu extends Component {

    constructor(props) {
        super();
        console.log(props)
        this.state = {
            selectedDish: null
        }
    }

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

    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>
            );
    }

    render() {
        const menu = this.props.dishes.map((dish) => {
            return (
              <div  className="col-12 col-md-5 m-1">
                <Card key={dish.id}
                   onClick={() => this.onDishSelect(dish)}>
                  <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>
                
                <DishDetail dish={this.state.selectedDish} />

            </div>
        );
    }
}
export default Menu;

Prev: I am not able to get the problem because there is no error detected in my visual studio code apart from the super being strikethrough so please help me out in understanding where the error is and what went wrong?

Updated code: Changed super(props) to super() since react version August 2020 no longer supports that

**Updated part: ** I have updated my code but it's showing Cannot read property 'map' of undefined error in const menu = this.props.dishes.map((dish) => of the Menu Component which I am unable to trace.

Adrita Choudhury
  • 29
  • 6
  • 1
    Does this -> https://stackoverflow.com/questions/63931230/is-react-superprops-deprecated resolve your error? – Prateek Thapa Oct 11 '20 at 14:33
  • I have changed the code according to this solution which removed my strike through from my super() but my props is getting an error in mapping since it is null, and i don't know to resolve that – Adrita Choudhury Oct 11 '20 at 16:02
  • The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call `super(props)` before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. [read more](https://reactjs.org/docs/react-component.html#constructor). Why did you write `super();`? – Ajeet Shah Oct 11 '20 at 16:25
  • Can not read 'map' of undefined error means, in `this.props.dishes.map((dish) => {`, the `dishes` were `undefined` the moment `map` was called on that. Quick fix: `this.props.dishes?.map((dish) => {` or `this.props.dishes && this.props.dishes.map((dish) => {`. – Ajeet Shah Oct 11 '20 at 16:31
  • @ajeet super(props) stopped working in VScode since the August 2020 update. Check this link https://stackoverflow.com/questions/63931230/is-react-superprops-deprecated also I've tried the quick fix methods but it's creating errors in the rest of my code. I just want to resolve the problem in my super(props) but i'm not getting a proper solution – Adrita Choudhury Oct 12 '20 at 10:48
  • @AdritaChoudhury What's your vscode version? Are you using [1.50.0](https://code.visualstudio.com/updates/v1_50)? I am currently using 1.50.0 and everything works perfectly i.e. I am able to use `super(props)` in vscode. It shows no error or warning anywhere. – Ajeet Shah Oct 12 '20 at 17:59

0 Answers0