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

CodePudding user response：

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

CodePudding user response：

Access the state using this.state

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.state.id}</div>
            <h5 className="p-5 border-top">{this.state.productName}</h5>
            <div>$ {this.state.price}</div>
          </div>
        </div>
      </div>
    );
  }
}

CodePudding user response：

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