hanldeClick(index){
    var x;
    const newGames = this.state.games.slice();
    if(this.state.games[index].selected) {
        newGames[index].selected = false;
        x = -1;
    }
    else {
        newGames[index].selected = true;
        x = 1;
    }
    this.setState({games: newGames, selected: this.state.selected + x});
}
renderGames(){
    var arr = [];
    const res = [];
    const len = this.state.games.length;
    var index = 0;
    for(let i=0; i<Math.ceil(len/3); i++){
        for(let j=0; j<3; j++){
            if(index>=len)
                break;
            var style = this.state.games[index].selected ? "active" : "inactive";
            arr.push(
                <Col key={index}>
                    <img
                        onClick={()=>{this.hanldeClick(index)}}
                        className={style}
                        src={this.state.games[index].image}
                        alt={this.state.games[index].description}
                    />
                </Col>
            );
            index++;
        }
        if(index<=len){
            res.push(<Row key={i} className='margin'>{arr}</Row>);
            arr = [];
        }
    }
    return res;
}