20. Displaying a customer profile - step 1

Added a new column in the table of the <SearchResults /> component and displayed a <button> for each row. The text of the button should read "Show profile". Then, created a new <CustomerProfile /> component. This component  is rendered next to the table in the <SearchResults /> component. This component receives one prop id. When clicking on a "Show profile" button for a given row, the component <CustomerProfile /> displays the text "Customer Profile", where the id of the selected customer is. Initially, the <CustomerProfile /> component doesn't show anything.

Hint: We need to record the selected customer id after clicking on a "Show profile" button. In which component do we think this state should be defined?

Tested: When first showing the page, no customer profile is displayed. When clicking the first "Show profile" button of the table, the text "Customer 1 profile" appears. When clicking the second "Show profile" button of the table, the text "Customer 2 profile" appears instead.

src/components/CustomerProfile.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CustomerProfile = ({id}) => {
+    return (
+        <p>Customer {id} Profile </p>
+    )
+}
+
+export default CustomerProfile;

src/components/SearchResults.jsx

@@ -1,21 +1,25 @@
 import React, { useState } from "react";
 import moment from "moment";
+import CustomerProfile from "./CustomerProfile";
 
 const Row = (props) => {
   const [highlight, setHighlight] = useState(false);
   const toggleHighlight = () => {
     setHighlight(!highlight);
   };
+
   const a = moment(props.result.checkOutDate);
   const b = moment(props.result.checkInDate);
   const days = a.diff(b, "days"); // 1
+
+
   return (
     <tr
-      onClick={() => toggleHighlight()}
-      style={{
-        backgroundColor: highlight ? "yellow" : "",
-      }}
-      key={props.index}
+    onClick={() => toggleHighlight()}
+    style={{
+      backgroundColor: highlight ? "yellow" : "",
+    }}
+    key={props.index}
     >
       <td>{props.result.id}</td>
       <td>{props.result.title}</td>
@@ -26,34 +30,49 @@ const Row = (props) => {
       <td>{props.result.checkInDate}</td>
       <td>{props.result.checkOutDate}</td>
       <td>{days}</td>
+      <td>
+        <button onClick={() => props.getCustomerId(props.result)}>Show profile</button>
+      </td>
     </tr>
   );
 };
-const SearchResultsOther = (props) => {
+const SearchResults= (props) => {
+
+  const [customerId, setCustomerId] = useState();
+
+  const getCustomerId = (result) => {
+    setCustomerId(result.id);
+  }
+
   return (
-    <table className="table table-bordered">
-      <thead>
-        <tr>
-          <th scope="col">Id</th>
-          <th scope="col">Title</th>
-          <th scope="col">First Name</th>
-          <th scope="col">Surname</th>
-          <th scope="col">Email</th>
-          <th scope="col">Room id</th>
-          <th scope="col">Check in date</th>
-          <th scope="col">Check out date</th>
-          <th scope="col">Number of nights</th>
-        </tr>
-      </thead>
-      <tbody>
-        {props.results.map((result) => {
-          return (
-              <Row key={result.id} result={result} />
-          ) 
-        })}
-      </tbody>
-    </table>
+    <div>
+      <table className="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col">Id</th>
+            <th scope="col">Title</th>
+            <th scope="col">First Name</th>
+            <th scope="col">Surname</th>
+            <th scope="col">Email</th>
+            <th scope="col">Room id</th>
+            <th scope="col">Check in date</th>
+            <th scope="col">Check out date</th>
+            <th scope="col">Number of nights</th>
+            <th scope="col">Show profile</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.results.map((result) => {
+            return (
+                <Row key={result.id} getCustomerId={getCustomerId} result={result} />
+            ) 
+          })}
+        </tbody>
+      </table>
+      {customerId ? <CustomerProfile id={customerId}/>  : null}
+
+    </div>
   );
 };
 
-export default SearchResultsOther;
+export default SearchResults;

src/components/SearchResultsOther.jsx

@@ -1,32 +1,11 @@
 import React, {useState} from "react";
 import moment from "moment";
 
-const SearchResults = (props) => {
+const SearchResultsOthers = (props) => {
     const array = [];
     props.results.forEach(() => {
       array.push(false);
-
-    }) 
-
-    /*
-    imagine we have five results
-      array = [false, false, false, false, false]
-
-      highlight = array
-
-      Each time a user clicks a row the clickHandler function is triggered below
-
-        let's say user clicks on row 4 (index 3)
-        arrToObj = { ...highlight } this translates to {0:false, 1:false, 2:false, 3:false, 4:false}
-        arrToObj[3] = (
-            (if false) true 
-            else false
-          )
-        setHighlight state will now return an object
-
-        {0:false, 1:false, 2:false, 3:true, 4:false}
-        
-    */
+    })
 
     const [highlight, setHighlight] = useState(array);
     const toggleHighlight = (index) => {
@@ -80,4 +59,4 @@ const SearchResults = (props) => {
     );
 };
 
-export default SearchResults;
+export default SearchResultsOthers;