HandleClick not changing the state

Question

I have the below where it should display images of beers retrieved from an API. Each image has a handleClick event which will direct them to a details page about this beer. My code below doesn't render the beers at all and goes straight to the details page of a random beer. Can anyone help me figure out why?

Thanks

export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
            beers: [],
            showMethod: false, 
            beerDetails: []
        };
        this.getBeerInfo = this.getBeerInfo.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(details) {
      this.setState({
        showMethod: !this.state.showMethod, 
        beerDetails: details
    });
    }

    render() {
      if(this.state.showMethod) {
        return (
          <Beer details = {this.state.beerDetails}/>
      );
      } 
      else {
        return (
           <div>{this.state.beers.map(each=> {
            return <img className = "img-beer" onClick = {this.handleClick(each)} src={each.image_url}/>
          })}</div>
      );
      }
    }
    
    componentDidMount() {
        this.getBeerInfo()
    }

    getBeerInfo() {
        ...gets info
    }
}

Does this answer your question? [React js onClick can't pass value to method](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) — cbr, Jun 23 '20 at 17:05
see also: [*Why is my function being called every time the component renders?*](https://reactjs.org/docs/faq-functions.html#why-is-my-function-being-called-every-time-the-component-renders) — cbr, Jun 23 '20 at 17:06

score 1 · Answer 1 · answered Jun 23 '20 at 17:07

When you use onClick like that you run the function at the render. So you have to use arrow function:

Not Working:

<img className = "img-beer" onClick = {this.handleClick(each)} src={each.image_url}/>

Working:

<img className = "img-beer" onClick = {() => this.handleClick(each)} src={each.image_url}/>

score 0 · Answer 2 · answered Jun 23 '20 at 17:10

The main issue is not calling the handle properly.

Also, I noticed that you are binding the functions in the constructor. It might be simpler to use ES6 function creation, so the scope of the class is bound to your handle method.

export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
            beers: [],
            showMethod: false, 
            beerDetails: []
        };
    }
    handleClick = (details) => {
      this.setState({
        showMethod: !this.state.showMethod, 
        beerDetails: details
    });
    }

    render() {
      if(this.state.showMethod) {
        return (
          <Beer details = {this.state.beerDetails}/>
      );
      } 
      else {
        return (
           <div>{this.state.beers.map(each=> {
            return <img className = "img-beer" onClick = {() => this.handleClick(each)} src={each.image_url}/>
          })}</div>
      );
      }
    }
    
    componentDidMount() {
        this.getBeerInfo()
    }

    getBeerInfo = () => {
        ...gets info
    }
}

HandleClick not changing the state

2 Answers2