{"size": 1100, "ext": "js", "max_stars_repo_path": "src/components/Authentication/Authentication.js", "max_stars_repo_name": "ArtemGavrishchishen/status-watch-client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Authentication/Authentication.js", "max_issues_repo_name": "ArtemGavrishchishen/status-watch-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Authentication/Authentication.js", "max_forks_repo_name": "ArtemGavrishchishen/status-watch-client", "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": 27.5, "max_line_length": 81, "alphanum_fraction": 0.5554545455}
import React, { Component } from 'react';

import styles from './Authentication.module.css';

export default class Authentication extends Component {
  state = { activeTabIndex: 0 };

  shouldComponentUpdate(nextProps, nextState) {
    const { activeTabIndex } = this.state;
    return nextState.activeTabIndex !== activeTabIndex;
  }

  handleChangeActiveTabIndex = idx => {
    this.setState({ activeTabIndex: idx });
  };

  render() {
    const { activeTabIndex } = this.state;
    const { items } = this.props;
    const activeTabComponent = items[activeTabIndex];
    return (
      <>
        <div className={styles.tabsBtn}>
          {items.map((item, idx) => (
            <button
              className={idx === activeTabIndex ? styles.active : styles.button}
              type="button"
              key={item.type.name}
              onClick={() => this.handleChangeActiveTabIndex(idx)}
            >
              {item.type.name}
            </button>
          ))}
        </div>
        <div>{activeTabComponent}</div>
      </>
    );
  }
}
