src/components/pages/Statistics.js

-import React, { Component } from 'react';
 import { Container, Menu } from 'semantic-ui-react';
-import Events from './Events'
-import Trainees from './Trainees'
+import React, { Component } from 'react';
+
+import Events from './Events';
+import LeaderBoard from './LeaderBoard';
+import Presence from './Presence';
 
 export default class Statistics extends Component {
-  state = { activeItem: 'events' }
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+  // eslint-disable-next-line react/state-in-constructor
+  state = { activeItem: 'events' };
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
   render() {
-    const { activeItem } = this.state
+    const { activeItem } = this.state;
     return (
       <div>
         <Container
           textAlign="center"
-            style={{
-              padding: '60px',
-            }}
+          style={{ paddingBottom: '5em', paddingTop: '1em' }}
         >
-          <Menu
-            attached='top'
-            tabular
-            size='huge'
-            compact={true}>
+          <Menu tabular attached="top" size="huge" compact>
             <Menu.Item
-              name='events'
+              name="events"
               active={activeItem === 'events'}
               onClick={this.handleItemClick}
-            >Alkalmak
+            >
+              Alkalmak
+            </Menu.Item>
+            <Menu.Item
+              name="presence"
+              active={activeItem === 'presence'}
+              onClick={this.handleItemClick}
+            >
+              Jelenlét
             </Menu.Item>
             <Menu.Item
-              name='trainees'
-              active={activeItem === 'trainees'}
+              name="leaderboard"
+              active={activeItem === 'leaderboard'}
               onClick={this.handleItemClick}
-            >Képződők
+            >
+              Ranglista
             </Menu.Item>
           </Menu>
           {activeItem === 'events' ? <Events /> : ''}
-          { activeItem === 'trainees' ? <Trainees /> : '' }
+          {activeItem === 'presence' ? <Presence /> : ''}
+          {activeItem === 'leaderboard' ? <LeaderBoard /> : ''}
         </Container>
       </div>
     );