React JS: Function undefined when called in .map function

Question

When I am using a map function in React, I am unable to use a function which I have already binded in my constructor. In the following code, imageClick is undefined when used in the map function below although I have binded the function and included this as an argument. Any idea what could be wrong?

export default class ScrapeInstagram extends React.Component { 

constructor(props) {
  super(props);
  this.imageClick = this.imageClick.bind(this);
}

imageClick() {
  console.log("made it here!")
}

render() {
    return (
    <Container>
        <center>
            <h1> A bunch of photos! </h1>
            <div className="box">
            {this.searchResults.map(function(photo){
                return <div className="dataSetBox" key={photo.toString()}><img id={id} src={photo} onClick={this.imageClick} alt="Image" height="350" width="450" margin="15px" border= "10"/></div>;
            }, this)}
            </div>
        </center>
    </Container>  
    );
}
}

try using arrow function (photo) => <div ....>as it's automatically bound to the component — h1b9b
– h1b9b, Commented Mar 7, 2018 at 19:24
Possible duplicate of What does "this" refer to in arrow functions in ES6? — Sterling Archer
– Sterling Archer, Commented Mar 7, 2018 at 19:30

sumit · Accepted Answer · 2018-03-07 19:36:04Z

2

Use ES6 Arrow functions which will help you to up access the this value of the enclosing context

{this.searchResults.map(photo) =>
    return <div className="dataSetBox" key={photo.toString()}><img id={id} src={photo} onClick={this.imageClick} alt="Image" height="350" width="450" margin="15px" border= "10"/></div>        
)}

answered Mar 7, 2018 at 19:36

sumit

15.5k14 gold badges75 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

React JS: Function undefined when called in .map function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related