a.js

// Feel free to configure any libraries you want to use by clicking the gear icon to the left of "JS", and then clicking on the "Add External Scripts/Pens" dropdown
// Look up any documentation you need
// It's OK to use native Javascript APIs, too!

const cities = [
  {
    name: 'Boston',
    description: 'A city in eastern Massachusetts, the capital of the state, on Massachusetts Bay; pop. 609,023 (est. 2008). It was founded c.1630 by the Massachusetts Bay Company under its governor, John Winthrop(1588–1649). Boston was the scene of many disturbances that led to the American Revolution at the end of the 18th century.'
  },
  {
    name: 'Paris',
    description: 'The capital of France, on the Seine River; pop. 2,203,817 (2006). Paris was held by the Romans, who called it Lutetia, and by the Franks, and was established as the capital in 987 under Hugh Capet. It was organized into three parts—the Île de la Cité (an island in the Seine), the Right Bank, and the Left Bank—during the reign of Philippe-Auguste 1180–1223.'
  },
  {
    name: 'Tokyo',
    description: 'The capital of Japan, located on the northwestern shores of Tokyo Bay, on the southeastern part of the island of Honshu; pop. 12,758,000 (est. 2007). Formerly called Edo, it was the center of the military government under the shoguns 1603–1867. Renamed Tokyo in 1868, it replaced Kyoto as the imperial capital.'
  },
  {
    name: 'Dogs',
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum officiis quas minima magnam blanditiis recusandae odio quia laudantium nihil modi sint velit aperiam adipisci, fuga id corrupti eaque iure consequuntur?'
  }
]

const checkTabActive = (currentIndex, values) => {
  return values.some((i) => i === currentIndex);
}

class App extends React.Component {
  state = {
    currentTabs: []
  }

  handleMultipleTabs = (cityIndex) => (e) => {
    const index = this.state.currentTabs.findIndex((elem) => elem === cityIndex);
    let newArr = [];
    
    if (index > -1) {
      newArr = [...this.state.currentTabs.slice(0, index),  ...this.state.currentTabs.slice(index + 1)]
    } else {
      newArr = [...this.state.currentTabs, cityIndex]
    }
    this.setState({
      currentTabs: newArr
    });
  }

  render() {
    const {currentTabs} = this.state;
    return (
      <div>
        {
          this.props.cities.map((city, i) => {
            const isActive = checkTabActive(i, currentTabs);
            return (
              <Tab isActive={isActive} name={city.name} onClick={this.handleMultipleTabs(i)}/>
            );
          })
        }
        
        {
          currentTabs.map((tab) => {
            return (
              <p>
                {this.props.cities[tab].description}
              </p>
            )
          })
        }
        
      </div>
    )
  }
}

const Tab = ({isActive, onClick, name}) => {
  return (
    <a href="#" className={isActive ? 'tab tab--active' : 'tab'} onClick={onClick}>{name}</a>
  )
}


ReactDOM.render(<App cities={cities}/>, document.getElementById('root'));