caremyway-client/src/components/User/Provider/ProviderProfile.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Card } from "semantic-ui-react";

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

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

const ProviderProfileView = ({ user }) => (
  <div>
    <Card fluid={true}>
      <Card.Content>
        <Card.Header>Provider Information</Card.Header>
        {user.provider &&
          user.provider.sin &&
          <Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>}
      </Card.Content>
    </Card>
  </div>
);

export default connect(mapStateToProps)(ProviderProfile);