Cannot Read property 'function name' of undefined

Question

I am making a grid, 3 columns each, each a Jumbotron with a button.


renderProperties = data => {
  var properties = []
  var propRow = []
  data.forEach(function(property,index){
    propRow.push(<Col xs={{ size:3, offset: .5}}> 
      <Jumbotron>
        <Image src={require("./images/1.jpg")} fluid rounded />
        <b> {property.location} </b> 
        <div> 
        <td> <Button variant="info" onClick={()=> this.handleRentProperty(property)}> Rent Property </Button> </td> 
        </div>
      </Jumbotron> 
    </Col> )
    if((index+1)%3 == 0){ // if first in the row
      properties.push(<Row>{ propRow }</Row>)
      propRow = []
    }

  })
  return (
    <Container>
      {properties}
    </Container> 
  )
}


handleRentProperty = prop =>{
this.setState({show: true}); 
  //this.setState({rentProperty: prop.location })

}

The renderProperties in rendered in the render as :

render() {
    {this.renderProperties(data)} 
}

I keep on getting

"TypeError: Cannot read property 'handleRentProperty' of undefined"

I have tried bind like in the following different ways:

onClick={(e)=> this.handleRentProperty(property, e)}
onClick={this.handleRentProperty.bind(this, property)}
onClick={this.handleRentProperty(property)}
onClick={()=>this.handleRentProperty.bind(this,property)}

UjinT34 · Accepted Answer · 2019-03-20 12:07:42Z

1

Change data.forEach(function(property,index){ to data.forEach((property,index) => {

Arrow functions get this from the scope they are defined in. Regular functions get their own this based on the caller.

edited Mar 20, 2019 at 12:07

answered Mar 20, 2019 at 12:01

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jo_va Over a year ago

Please add a comment to explain your answer, regarding the use of an arrow function vs a regular function so future SO users will better understand why this is happening

FranktheTank Over a year ago

O wow, thank you, I can/will search it up online ( and thank you jo_va for saying what it is). I gotta wait 9 minutes before I can accept answer

Collectives™ on Stack Overflow

Cannot Read property 'function name' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related