<div id="app"></div>
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.app {
  position: relative;
  height: 100vh;
  background-color: #041d3e;
  transition: all 0.3s linear;
}

.app--one {
    background-color: #0e4a54;
}

.app--two {
  background-color: #22695e;
}

.app--three {
  background-color: #9e964a;
}

.app--four {
  background-color: #9a6631;
}

.app--five {
  background-color: #814630;
}

.app__years {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  z-index: 2;
  position: relative;
}

.app__years__item {
  display: inline-block;
  margin: 8px;
  padding: 5px 8px;
  color: white;
  border-radius: 15px;
  border: 2px solid transparent;
  transition: all 0.3s linear;
  cursor: pointer;
}

.app__years__item--active {
  border: 2px solid white;
}
const {Component} = React;

const DATA = {
  "1880": { pirates: 20000, temperature: 14.5, className: "app--one" },
  "1920": { pirates: 15000, temperature: 15.0, className: "app--two" },
  "1940": { pirates: 5000, temperature: 15.3, className: "app--three" },
  "1980": { pirates: 400, temperature: 15.7, className: "app--four" },
  "2000": { pirates: 17, temperature: 16, className: "app--five" },
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedYear: null
    }
  }
  
  handleClick(year, e) {
    e.preventDefault()
    
    // this.setState() permette di modificare uno o piu dati dello state
    // A ogni modifica, il metodo 'render' viene chiamato automaticamente
    // e vengono aggiornate o modificate le parti della return che
    // differiscono dalla return precedente.
    
    this.setState({ selectedYear: year })
  }
  
  renderYearbuttons(year) {
    
    // 'classNames' è un'utility che ho inserito tramite cdn per poter scrivere con facilità
    // il codice che serve per cambiare il css di un div quando avviene un determinato cambiamento
    // nello State.
    
    let appYearsItem = classNames(
      "app__years__item",
      { "app__years__item--active": year === this.state.selectedYear }
    )

    // Viene aggiunto un attributo di React, 'onClick'. Il metodo che contiene verrà chiamato
    // ogni volta che l'utente cliccherà sul div.

    return (
      <div
        key={year}
        className={ appYearsItem }
        onClick={ this.handleClick.bind(this, year) }
        >
        { year }
      </div>
      )
  }

  render() {
    let app = classNames(
      "app",
      this.state.selectedYear ? DATA[this.state.selectedYear].className : ""
    )
    
    return (
      <div className={ app }>
        <div className="app__years">
          { Object.keys(DATA).map(this.renderYearbuttons.bind(this)) }
        </div>
      </div>
    );
  }
};
 
ReactDOM.render(
  <App />, 
  document.getElementById('app'));
View Compiled
Rerun