Create Event component, add it to Statistics page.

src/actions/statistics.js

@@ -4,7 +4,7 @@ import { GET_EVENTS } from './types';
 export const getEvents = () => (
   async (dispatch) => {
     try {
-      const response = await axios.get('/api/v1/events');
+      const response = await axios.get('/api/v1/events/');
       dispatch({
         type: GET_EVENTS,
         payload: response.data,

src/components/pages/Events.js

+import React, { Component } from 'react';
+import { Container, Table } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getEvents } from '../../actions/statistics';
+
+class Events extends Component {
+  componentWillMount() {
+    this.props.getEvents();
+  }
+
+  renderEvents() {
+    return this.props.events.map((event) =>
+    { return (
+        <Table.Row>
+          <Table.Cell>{event.name}</Table.Cell>
+          <Table.Cell>{event.date}</Table.Cell>
+        </Table.Row>
+    );
+    });
+  }
+
+  render() {
+    return (
+      <Container textAlign='center'>
+        <Table celled selectable>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Alkalom neve</Table.HeaderCell>
+              <Table.HeaderCell>Dátum</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderEvents()}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ events, user }) => ({ events, user });
+
+export default connect(mapStateToProps, { getEvents })(Events);

src/components/pages/Statistics.js

 import React, { Component } from 'react';
 import { Container, Header, Segment, Menu } from 'semantic-ui-react';
+import Events from './Events'
 
 export default class Statistics extends Component {
   state = { activeItem: 'events' }
@@ -9,18 +10,31 @@ export default class Statistics extends Component {
     const { activeItem } = this.state
     return (
       <div>
-          <Container textAlign="center">
-          <Menu tabular compact={true}>
-            <Menu.Item name='events' active={activeItem === 'events'} onClick={this.handleItemClick} />
+          <Container
+            textAlign="center"
+            style={{
+              padding: '20px'
+            }}
+          >
+          <Menu
+            attached='top'
+            tabular
+            size='huge'
+            compact={true}>
+            <Menu.Item
+              name='events'
+              active={activeItem === 'events'}
+              onClick={this.handleItemClick}
+            >Alkalmak
+            </Menu.Item>
             <Menu.Item
               name='trainees'
               active={activeItem === 'trainees'}
               onClick={this.handleItemClick}
-            />
-            <Segment inverted textAlign='center' vertical>
-
-            </Segment>
+            >Képződők
+            </Menu.Item>
           </Menu>
+          { activeItem === 'events' ? <Events /> : '' }
         </Container>
       </div>
     );