{"size": 1404, "ext": "js", "max_stars_repo_path": "frontend/src/components/ImageCarousel.js", "max_stars_repo_name": "JKozma81/react-webshop", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/components/ImageCarousel.js", "max_issues_repo_name": "JKozma81/react-webshop", "max_issues_repo_issues_event_min_datetime": "2021-09-02T09:52:25.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-02T09:52:25.000Z", "max_forks_repo_path": "frontend/src/components/ImageCarousel.js", "max_forks_repo_name": "JKozma81/react-webshop", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 21.9375, "max_line_length": 58, "alphanum_fraction": 0.5676638177}
import React, { Component } from 'react';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Image from 'react-bootstrap/Image';

export default class ImageCarousel extends Component {
	state = {
		images: [...this.props.images],
		active: 1,
	};

	handleInc = () => {
		const index = this.state.active;
		if (index + 1 > this.state.images.length) return;
		this.setState({ active: index + 1 });
	};

	handleDec = () => {
		const index = this.state.active;
		if (index - 1 <= 0) return;
		this.setState(() => ({
			active: index - 1,
		}));
	};

	handleClick = (index) => {
		this.setState(() => ({ active: index }));
	};

	render() {
		return (
			<Container className="p-3">
				<Row>
					<img
						src={this.state.images[this.state.active - 1].url}
						alt="product"
						className="big-img mr-auto ml-auto"
					/>
				</Row>
				<Row>
					<Button className="ml-auto" onClick={this.handleDec}>
						&#8656;
					</Button>{' '}
					{this.state.images.map((image, idx) => (
						<Image
							onClick={() => {
								this.handleClick(idx + 1);
							}}
							className="tiny-img mr-2 ml-2"
							key={`img_${idx}`}
							src={image.url}
							thumbnail
						/>
					))}
					<Button className="mr-auto" onClick={this.handleInc}>
						&#8658;
					</Button>
				</Row>
			</Container>
		);
	}
}
