caremyway-client/src/components/User/Client/ClientProfile.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Card, Button, Label } from "semantic-ui-react";

class ClientProfile extends Component {
  render() {
    const { selfUser } = this.props;
    return <ClientProfileView user={selfUser} />;
  }
}

function mapStateToProps(state) {
  return { ...state.user };
}

const ClientProfileView = ({ user }) => (
  <div>
    <Card fluid={true}>
      <Card.Content>
        <Card.Header>Client Information</Card.Header>
        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>
        <Card.Description>
          <Button
            basic
            color="green"
            size="small"
            as={Link}
            to="/user/profile/client/create-worktype"
          >
            Create Worktype
          </Button>
        </Card.Description>
      </Card.Content>
    </Card>
    {(user.client.work_types || []).length &&
      <Card.Group>
        {user.client.work_types.map((worktype, index) => (
          <Card key={index}>
            <Card.Content>
              <Card.Header as="h4">
                <Label
                  circular
                  empty
                  style={{
                    backgroundColor: worktype.color,
                    borderColor: worktype.color
                  }}
                />{"  " + worktype.label}
              </Card.Header>
              <Card.Meta>
                Worktype
              </Card.Meta>
            </Card.Content>
            <Card.Content extra>
              <Button.Group>
                <Button
                  basic
                  color="yellow"
                  size="small"
                  as={Link}
                  to={`/user/profile/client/update-worktype/${worktype.uuid}`}
                >
                  Edit
                </Button>
                <Button basic color="red" size="small">Delete</Button>
              </Button.Group>
            </Card.Content>
          </Card>
        ))}
      </Card.Group>}
  </div>
);

export default connect(mapStateToProps)(ClientProfile);