SelectOption component
import React from 'react'
import { connect } from 'react-redux';
import { Select } from '../../components/formElements';
import './SelectOption.css';
import {FetchRoleStart } from '../../actions'
import ModalPopUp from '../ModalWindow'
import RoleInfo from './RoleInfo';


class SelectOption extends React.Component {

  constructor() {
    super();
    this.state = {
      showInfo: false,
      selectedOption: 'Option 1',
    };
  }
  componentDidMount = () => {
    this.props.FetchRoleStart();


  }

  onChange = (event) => {

    console.log("role front", event.target.value)


    this.setState({
      showInfo: !this.state.showPopup,
      selectedOption: event.target.value
    })

  }
  render() {
    console.log("this props role", this.props.user)
    let roleList = [];
    if (this.state.showInfo) {
      return (<>
        <div className="RoleInfoKlasa1">Role {this.state.selectedOption}</div>
        <div><RoleInfo /></div>

      </>
      )

    }
    if (this.props.user.role.isFetched) {
      console.log("size of the role", this.props.user.role.roles.data.size)

      for (var i = 0; i < this.props.user.role.roles.data.size; i++) {
        console.log("this role category name", this.props.user.role.roles.data.data[i].categoryname)
        roleList.push(" ", this.props.user.role.roles.data.data[i].categoryname)
        console.log("ROLEEE LIST", roleList)
      }

      return (
        <>
          <div className="SelectOptionKlasa1">
            <Select
              name="roleSelect"

              defaultValue={this.state.selectedOption}
              options={roleList.map((o, i) => {
                return { id: i, value: o, label: o }
              })}
              label="Choose existing role"
              onChange={this.onChange}
            />
          </div>

        </>
      )

    }
    console.log("role is not fetched")
    return ""
  }

}
const mapDispatchToProps = (dispatch) => ({

  FetchRoleStart: (values) => dispatch(FetchRoleStart(values))


});


const mapStateToProps = state => {
  return {
    user: state.user,

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectOption);

RoleInfo
import React from 'react';
import { connect } from 'react-redux';

import { Form, Field } from 'react-final-form';
import { Form as BSForm, Container, Button } from 'react-bootstrap';
import { required } from '../../helpers/forms/validators';
import { Input } from '../../components/formElements';
import "./RoleInfo.css";
import { FormattedMessage, injectIntl } from 'react-intl';
import { } from '../../actions/';
import SelectOption from './SelectOption'

class RoleInfo extends React.Component {
    FORM_LABEL = 'forms.labels';
    FORM_PLC = 'forms.placeholders';

    onSubmit = values => {
        console.log("Form Values", values);
        this.props.RoleStart(values);

    }
    componentDidMount = () => {


    }


    render() {
        const { formatMessage } = this.props.intl;

        return (

            <Container>
                <Form
                    onSubmit={this.onSubmit}
                    render={props => (
                        <div className="RoleInfoKlasa">

                            <BSForm validated={props.valid} onSubmit={props.handleSubmit}>
                                <Field
                                    name="email"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.Email`} defaultMessage="Email" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.Email`, defaultMessage: "Email" })}
                                    component={Input}
                                    validate={required}
                                />

                                <Field
                                    name="address1"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.First Address`} defaultMessage="First Address" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.First Address`, defaultMessage: "First Address" })}
                                    component={Input}
                                    validate={required}
                                />
                                <Field
                                    name="address2"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.Second Address`} defaultMessage="Second Address" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.Second Address`, defaultMessage: "Second Address" })}
                                    component={Input}
                                    validate={required}
                                />
                                <Field
                                    name="vat"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.VAT`} defaultMessage="VAT" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.VAT`, defaultMessage: "VAT" })}
                                    component={Input}
                                    validate={required}
                                />
                                <Field
                                    name="catetegoryName"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.Category Name`} defaultMessage="Category Name" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.Category Name`, defaultMessage: "Category Name" })}
                                    component={Input}
                                    validate={required}

                                />
                                <Field
                                    name="date_created"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.Creation_date`} defaultMessage="Creation date" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.Creation_date`, defaultMessage: "Creation_date" })}
                                    component={Input}
                                    validate={required}
                                />
                                <Field
                                    name="ProfileName"
                                    label={<FormattedMessage id={`${this.FORM_LABEL}.Profile Name`} defaultMessage="Profile Name" />}
                                    placeholder={formatMessage({ id: `${this.FORM_PLC}.Profile Name`, defaultMessage: "Profile Name" })}
                                    component={Input}
                                    validate={required}
                                />


                                <Button type="submit"><FormattedMessage id={`${this.FORM_LABEL}.Submit Info`} defaultMessage="Submit Info" /></Button>
                            </BSForm>
                        </div>
                    )}
                />
            </Container>
        )
    }
}




const mapStateToProps = state => {
    return {
        role: state.role,

    }
}

export default injectIntl(connect(mapStateToProps)(RoleInfo));