gistfile1.txt

import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Home from './home';
import MemberList from './memberList';
import Services from './services';
import {Sidebar} from './sidebar';
import {connect} from 'react-redux';
import ChangeServices from './changeServices';
import Profile from './profile'
import {fetchServices, fetchMembers} from '../actions';

class App extends React.Component {

  componentDidMount() {
    this.props.dispatch(fetchServices());
    this.props.dispatch(fetchMembers());
  }

  render() {

    return (
      <Router>
        <div className='app'>
          <header>
            <h1><Link to ="/">Leev</Link></h1>
          </header>
          <Sidebar />
          <main>
            <Route exact path="/" component={Home} />
            <Route exact path='/members' component = {MemberList}/>
            <Route exact path='/services' component = {Services}/>
            <Route exact path ='/members/:memberId' component = {Profile}/>
          </main>
        </div>
      </Router>
    );
  }
}

const mapStateToProps = state => ({
  state: state.leev
});

export default connect(mapStateToProps)(App);

*************

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

class Profile extends React.Component {

  render() {
    console.log(this.props.member);
    return (
      <div className='individualProfile'>
        <div className='name'>
          <h3>{this.props.member.name}</h3>
        </div>
        <p className='role'>{this.props.member.role}</p>
        <div className='services'>
          <h2>Services</h2>
          <div className='individualService'>
            {this.props.member.services}
          </div>
        </div>
        <div className='leaves'>
          <h2>Leave:</h2>
            {this.props.member.leave.service}
            {this.props.member.leave.reason}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  member : state.leev.members.find(member =>
    member.id == (ownProps.match.params.memberId))
})

export default connect(mapStateToProps)(Profile);