make row selectable

src/AdminHome.js

@@ -8,7 +8,7 @@ export default class AdminHome extends Component {
 
   render() {
     return (
-      <Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
+      <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
         <Tab eventKey={1} title="Users">
           <UserTable/>
         </Tab>

src/User.css

@@ -0,0 +1,4 @@
+.rowSelected{
+  background: cyan;
+
+}

src/User.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import './User.css'
 
 
 export default class User extends Component {
@@ -11,14 +12,20 @@ export default class User extends Component {
     };
   }
 
+  onSelect= () => {
+      this.props.onUserSelected(this.props.userId)
+  }
+
   render() {
+
+    let rowClassName= this.props.userId===this.props.selected ? "rowSelected" : "row"
     return (
-      <tr>
-        <td>{this.props.userId}</td>
-        <td>{this.props.creationTs}</td>
-        <td>{this.props.admin}</td>
-        <td>{this.props.partner}</td>
-        <td>{this.props.email}</td>
+      <tr onClick={this.onSelect}>
+        <td className={rowClassName}>{this.props.userId}</td>
+        <td className={rowClassName}>{this.props.creationTs}</td>
+        <td className={rowClassName}>{this.props.admin}</td>
+        <td className={rowClassName}>{this.props.userId}</td>
+        <td className={rowClassName}>{this.props.email}</td>
       </tr>
     );
   }

src/UserTable.js

@@ -3,6 +3,7 @@ import User from './User';
 import {Table} from 'react-bootstrap';
 
 
+
 export default class UserTable extends Component {
 
   static propTypes = {
@@ -11,42 +12,37 @@ export default class UserTable extends Component {
 
   constructor(props) {
     super(props);
-
+    this.onUserSelected=this.onUserSelected.bind(this)
     this.state = {
-
+      selected:false
     };
   }
 
+  onUserSelected(userId){
+    this.setState({ selected: userId });
+
+  }
+
   render() {
     return (
-      <Table striped bordered condensed hover responsive>
-  <thead>
-    <tr>
-      <th>User Id</th>
-      <th>Creation ts</th>
-      <th>Admin</th>
-      <th>Partner</th>
-      <th>Email</th>
-    </tr>
-  </thead>
-  <tbody>
-<User userId='@joe' creationTs='12 avril' admin='false' partner='false' email='joe@mailcom'/>
-    <tr>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-    </tr>
-    <tr>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-    </tr>
-  </tbody>
-</Table>
+      <div>
+        <Table striped bordered condensed hover responsive>
+          <thead>
+            <tr>
+              <th>User Id</th>
+              <th>Creation ts</th>
+              <th>Admin</th>
+              <th>Partner</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tbody>
+            <User userId='@joe' creationTs='12 avril 2018' admin='true' partner='false' email='joe@mailcom' onUserSelected={this.onUserSelected} selected={this.state.selected}/>
+      <User userId='@jeanne@mail.com' creationTs='14 avril 2018' admin='false' partner='true' email='jeanne@mailcom' onUserSelected={this.onUserSelected} selected={this.state.selected}/>
+          </tbody>
+        </Table>
+
+      </div>
     );
   }