{"size": 532, "ext": "js", "max_stars_repo_path": "projects/color-game/assignment-7/src/components/Squares.js", "max_stars_repo_name": "devendrk/shortcut-react-club", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "projects/color-game/assignment-7/src/components/Squares.js", "max_issues_repo_name": "devendrk/shortcut-react-club", "max_issues_repo_issues_event_min_datetime": "2018-09-20T15:44:38.000Z", "max_issues_repo_issues_event_max_datetime": "2018-10-25T08:51:54.000Z", "max_forks_repo_path": "projects/color-game/assignment-7/src/components/Squares.js", "max_forks_repo_name": "devendrk/shortcut-react-club", "max_forks_repo_forks_event_min_datetime": "2018-08-10T13:08:06.000Z", "max_forks_repo_forks_event_max_datetime": "2019-04-10T14:31:46.000Z"}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": 16, "avg_line_length": 18.3448275862, "max_line_length": 48, "alphanum_fraction": 0.5751879699}
import React from "react";

export class Squares extends React.Component {
	render() {
		const { squares, onClickSquare } = this.props;

		return (
			<div className="squares">
				{squares.map((square, index) => {

					const squareStyles = {
						backgroundColor: square.color,
						opacity: square.hidden ? "0" : "1"
					}

					return (
						<div key={index}
							onClick={() => onClickSquare(index)} 
							className={"square"} 
							style={squareStyles} />
					)

				})}
			</div>
		);
	}
}

export default Squares;