import React, { Component } from 'react'

export class MultipleCheckBox extends Component {

    state={

        Colornames:{

            first:false,

            second:false,

            third:false

        }

    }

    checkBoxClick = (e) => {

        let {name, checked} = e.target;

        this.setState((e) => {

            let selectedSport=e.Colornames;

            return selectedSport[name]=checked;

        })

    }

    render() {

        // let displaySports=Object.keys(this.state.Colornames).filter((x)=> this.state.Colornames[x])

        return (

            <div>

                <div>

                    <h1>

                        gfghfh

                    </h1>

                    <label htmlFor="foo">first</label>

                    <input type="checkbox" name="first" id="foo" onChange={this.checkBoxClick}/>

                    <label htmlFor="bar">second</label>

                    <input type="checkbox" name="second" id="bar" onChange={this.checkBoxClick}/>

                    <label htmlFor="coo">third</label>

                    <input type="checkbox" name="third" id="coo" onChange={this.checkBoxClick}/>

                    <hr/>

                    {/* <div style={{backgroundColor: "black", color: "cyan"}}>

                        {displaySports+" "}

                    </div> */}

                </div>

            </div>

        )

    }

}

export default MultipleCheckBox