-1

here is my code and I cannot find where the problem is

import React, {Component} from "react";

export default class Product extends Component{

state = {
    id: this.props.product.id,
    productName: this.props.product.productName,
    price: this.props.product.price,
}
render(){
    return<div className="col-lg-g">
        <div className="card m-2">
            <div className="card-body">
                <div className="text-muted"># {this.props.id}</div>
                <h5 className="p-5 border-top">{this.props.productName}</h5>
                <div>$ {this.props.price}</div>
                //{console.log(state)}
            </div>
        </div>
        </div>
}

}

it shows Line 17:36: 'state' is not defined no-undef whenever I run the code

5
  • You have an comma after product.price to remove Commented Apr 28, 2022 at 4:42
  • And in state you're using this.props.product.id but in the html you're only using this.props.id etc. Commented Apr 28, 2022 at 4:44
  • @KScandrett yes but i have used product.id too in html it shows same problem
    – Noob_Gamer
    Commented Apr 28, 2022 at 4:49
  • @K Scandrett, the comma dangle is an ESLint rule: eslint.org/docs/rules/comma-dangle . Commented Apr 28, 2022 at 4:51
  • you cannot access state directly, you need to use this.state
    – Code Ninja
    Commented Apr 28, 2022 at 4:55

2 Answers 2

2

That's a class, when you write state = ... , that's an instance property, hence you access it with this.state.

0

ok i did console.log(state) but i should have used console.log(this.state)

Not the answer you're looking for? Browse other questions tagged or ask your own question.