{"size": 854, "ext": "js", "max_stars_repo_path": "search/Listbox.js", "max_stars_repo_name": "abhi-j/Melophile", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "search/Listbox.js", "max_issues_repo_name": "abhi-j/Melophile", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "search/Listbox.js", "max_forks_repo_name": "abhi-j/Melophile", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.6875, "max_line_length": 151, "alphanum_fraction": 0.3957845433}
import React from 'react';

const Listbox = props => {

    const clicked = e => {
        e.preventDefault();
        props.clicked(e.target.id);
    }    

    return (
        <div className="col-sm-6 px-0">
            <div className="list-group">
                {
                    props.items.map((item, idx) => 
                    <button key={idx}
                        onClick={clicked}
                        className="list-group-item list-group-item-action list-group-item-light" style={{backgroundColor:'#2B2E33',color:"whitesmoke"}}
                        id={item.track.id}>
                            
                            {item.track.name}
                         
                            
                    </button>)
                }
            </div>
        </div>
        

    );
}

export default Listbox;