Profile.js

import React, { Component } from 'react';
import { Container, Segment, Form, Dropdown, Divider } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { textChange, submitRegistration, groupChange } from '../../actions';

const options = [
  { key: 'DT', text: 'DevTeam', value: 'DT' },
  { key: 'NET', text: 'NeTeam', value: 'NET' },
  { key: 'ST', text: 'SecurITeam', value: 'ST' },
  { key: 'SYS', text: 'SysAdmin', value: 'SYS' },
  { key: 'HAT', text: 'Hallgatói Tudásbázis', value: 'HAT' },
];

class Profile extends Component {
  componentWillMount() {
    if (!this.props.id) {
      this.props.history.push('/home');
    }
  }

  render() {
    const { nick, groups, motivation, signed, id } = this.props;
    return (
      <div>
        <Segment textAlign='center' vertical>
          <Container>
            <Form>
              <Divider horizontal>Becenév</Divider>
              <Form.Input
                fluid
                name='nick'
                onChange={e => this.props.textChange(e)}
                placeholder='Becenév'
                value={nick}
              />
              <Divider horizontal>Motivációs levél</Divider>
              <Form.TextArea
                rows={10}
                name='motivation'
                onChange={e => this.props.textChange(e)}
                placeholder='Miért szeretnék jelentkezni...'
                value={motivation}
              />
              <Divider horizontal>Érdekelt Körök</Divider>
              <Dropdown
                fluid
                multiple
                selection
                placeholder='DevTeam, ...'
                onChange={(_, v) => this.props.groupChange(v.value)}
                options={options}
                defaultValue={groups}
              />
              <br />
              <Form.Checkbox
                name='signed'
                label='Szeretnék jelentkezni a KSZK-ba'
                onChange={(_, v) => this.props.textChange({ target: { name: v.name, value: v.checked } })}
                checked={signed}
              />
              <Form.Button
                onClick={() => this.props.submitRegistration({
                  nick, motivation, signed, groups, id
                })}
              >
                Mentés
              </Form.Button>
            </Form>
          </Container>
        </Segment>
      </div>
    );
  }
}

const mapStateToProps = ({ user: { nick, groups, motivation, signed, id } }) => {
  return {
    nick,
    groups,
    motivation,
    signed,
    id,
  };
};

export default connect(mapStateToProps, { textChange, submitRegistration, groupChange })(Profile);