{"size": 744, "ext": "js", "max_stars_repo_path": "src/components/3main/bookShelf/NavBar.js", "max_stars_repo_name": "190030402-DivyaAmruthaVudattu/bookstore", "max_stars_repo_stars_event_min_datetime": "2017-08-15T14:46:59.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-25T20:30:58.000Z", "max_issues_repo_path": "src/components/3main/bookShelf/NavBar.js", "max_issues_repo_name": "190030402-DivyaAmruthaVudattu/bookstore", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/3main/bookShelf/NavBar.js", "max_forks_repo_name": "190030402-DivyaAmruthaVudattu/bookstore", "max_forks_repo_forks_event_min_datetime": "2018-01-17T13:54:15.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-22T14:37:11.000Z"}
{"max_stars_count": 21, "max_issues_count": null, "max_forks_count": 5, "avg_line_length": 29.76, "max_line_length": 117, "alphanum_fraction": 0.6169354839}
import React, { Component } from 'react';
import '../main.css';
import bookInfo from '../../../books.json';

class NavBar extends Component {
  onFilterSelect = (category) => {
    this.props.onFilterClick(category);
  }
  render() {
    const categories = bookInfo.store.map((x, index) => {
      let categoryName = x.category.charAt(0).toUpperCase() + x.category.slice(1);
      let style = 'CategoryButton ' + (this.props.activeTab == x.category ? 'CategoryButtonActive' : '');
      return (
        <button key={index} onClick={() => this.onFilterSelect(x.category)} className={style}>{categoryName}</button>
      )
    });
    return (
      <div className='NavBar'>
        {categories}
      </div>
    );
  }
}

export default NavBar;