tab component

const Tabs = props => {
  const { categories, currentCategory } = props;

  return (
    <>
      <ul className="nav nav-pills nav-justified">
        {categories.map(category => {
          let btnClassName;

          category.name === currentCategory
            ? (btnClassName = 'btn-primary')
            : (btnClassName = 'btn-outline-primary');

          return (
            <li className="nav-item active p-1" key={category.id}>
              <button
                className={`btn ${btnClassName} btn-block`}
              >
                {category.name}
              </button>
            </li>
          );
        })}
      </ul>
    </>
  );
};

class App extends Components {
  // ...
  render() {
    const { currentPosts } = this.state;

    return (
      <div className="App">
        <Tabs
          categories={this.categories}
          currentCategory={currentCategory}
        />
      </div>
    );
  }
}