import React, { Component } from "react";
import "./sidebar.css";
import SidebarButton from "./../sidebar_button/sidebar_button";
import { NavLink } from "react-router-dom";

class Sidebar extends Component {
  state = {};

  createSidebar = (nav_link_array, text_array) => {
    let sidebar = [];

    // loops over length of the navlink to populate the HTML
    for (let index = 0; index < nav_link_array.length; index++) {
        sidebar.push(
          <NavLink exact to={`/Teams/ ${nav_link_array[index]}`} id="sidebar_button">
            <SidebarButton text={text_array[index]} />
          </NavLink>
        )
    }
    sidebar.push()
    return sidebar;
  }

  render() {
    return (
      <div class="grid">
        {this.createSidebar(this.props.nav_link_array, this.props.text_array)}
      </div>
    );
  }
}

export default Sidebar;