{"size": 690, "ext": "js", "max_stars_repo_path": "src/Components/ColorDivs/ColorDiv/ColorDiv.js", "max_stars_repo_name": "ksjc1995/Color-Guessing-Game-React-", "max_stars_repo_stars_event_min_datetime": "2018-06-06T04:34:00.000Z", "max_stars_repo_stars_event_max_datetime": "2018-06-06T04:34:00.000Z", "max_issues_repo_path": "src/Components/ColorDivs/ColorDiv/ColorDiv.js", "max_issues_repo_name": "ksjc1995/Color-Guessing-Game-React-", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/ColorDivs/ColorDiv/ColorDiv.js", "max_forks_repo_name": "ksjc1995/Color-Guessing-Game-React-", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.5625, "max_line_length": 74, "alphanum_fraction": 0.5130434783}
import React, { Component } from 'react';

class ColorDiv extends Component {

    handleClick = (styles)=>{
        console.log(styles.backgroundColor);
        this.props.clicked(styles.backgroundColor);
    }

    render(){
        const styles = {
            boxSizing: 'border-box',
            borderRadius: '5px',
            backgroundColor:this.props.randomColor,
            width:'30%',
	        float: 'left', 
        	margin: '1.66%',
	        paddingBottom:'25%' /*to add some space*/
        };

        return (
            <div style={styles} onClick={()=> {this.handleClick(styles)}}>
      
            </div>  
          );
    }
    

    
}

export default ColorDiv;