second assignment complete

README.md

@@ -6,7 +6,7 @@
 * Create a folder in src called components to hold all our components
 * Create the UserDetail and ListOfUsers functional components
 * Import and use components in App
-* Send the user array into Apps and then into ListOfUsers
+* Send the user array into App and then into ListOfUsers
 * Send the first user from the array down into the UserDetail component
 
 ### Do
@@ -32,11 +32,9 @@
 * In onChange handler function, setState the searchText to the value from the textbox
 
 ### Do
-* Create a variable called currentUser in index.js. 
+* Create a variable called currentUser in index.js.
 * Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser.
 * Send this function down the child tree so that ListOfUsers can call it
 * Change index.js to send currentUser down the child tree instead of App.js hard coding the first one
 * Register click event for ListOfUsers view link, call the function sent into props by parents, supply the argument of whatever user was clicked on.
 * Re render the components
-
-

src/App.js → src/components/App.js

@@ -1,19 +1,25 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import ListOfUsers from "./ListOfUsers";
 
-function App() {
-  return (
-    <div className="App">
+function App(props) {
+
+    return (
+      <div className="App">
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h2>Welcome to React</h2>
       </div>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
+      <ul>
+        <ListOfUsers users={props.users} />
+      </ul>
     </div>
   );
+
 }
 
 export default App;

src/components/Header.js

@@ -0,0 +1,23 @@
+import React from "./react";
+import logo from "./logo.svg";
+
+function Header(props) {
+  const userItems = props.users.map(function(user){
+    return (
+      <p>
+      {user.first_name};
+      {user.last_name};
+      </p>
+    );
+  });
+  return (
+    <div className="App">
+      <div className="App-header">
+        <img src={logo} className="App-logo" alt="logo"
+        <h2>Welcome to React</h2>
+        {userItems}
+      </div>
+  );
+}
+
+export default Header;

src/components/ListOfUsers.js

@@ -0,0 +1,16 @@
+import React from "react";
+import UserDetail from "./UserDetail";
+
+function ListOfUsers(props) {
+  const Users = props.users.map((user, index) => (
+    <UserDetail
+      first_name={user.first_name}
+      last_name={user.last_name}
+      key={index}
+    />
+  ))
+  return (
+    Users[0]
+  )
+}
+export default ListOfUsers;

src/components/UserDetail.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function UserDetail(props) {
+  return (
+    <li>
+      {props.first_name}
+      &nbsp;
+      {props.last_name}
+    </li>
+  );
+}
+
+export default UserDetail;

src/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./components/App";
 import "./index.css";
 import users from "./users";
 
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }