Strange error passing props from App to UserInfo

src/App.js

@@ -1,17 +1,20 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import UserInfo from "./components/UserInfo";
+import UserDetail from "./components/UserDetail";
+import ListOfUsers from "./components/ListOfUsers";
+import CreateUser from "./components/CreateUser";
 
-function App() {
+function App(props) {
+  console.log(props);
+  console.log(props.users);
   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>
+      <CreateUser />
+      <ListOfUsers users={props.users} />
+      <UserDetail user={props.users[0]} />
+      <UserInfo test={props} />
     </div>
   );
 }

src/components/CreateUser.js

@@ -0,0 +1,63 @@
+import React from "react";
+
+class CreateUser extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            firstName: "",
+            lastName: "",
+            address: "",
+            phone: "",
+            occupation: ""
+        };
+    }
+
+    createInput(label, prop) {
+        return (
+            <div>
+                <label>{label}</label>
+                <input
+                    type="text"
+                    value={this.state[prop]}
+                    onChange={
+                        (e) => {
+                            var s = {};
+                            var propname = prop;
+                            s[propname] = e.target.value
+                            this.setState(s);
+                        }
+                    }
+                    name={prop}
+                />
+            </div>
+        );
+    }
+
+    render() {
+        return(
+            <div>
+                <form>
+                    { this.createInput("First Name", "firstName") }
+                    { this.createInput("Last Name", "lastName") }
+                    { this.createInput("Address", "address") }
+                    { this.createInput("Phone", "phone") }
+                    { this.createInput("Occupation", "occupation") }
+
+
+                    <div>
+                        <input type="submit" value="Submit" onClick={
+                            (e) => {
+                                e.preventDefault();
+                                console.log(this.state);
+
+                            }
+                        }
+                        />
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default CreateUser;

src/components/ListOfUsers.js

@@ -0,0 +1,63 @@
+import React from "react";
+
+class ListOfUsers extends React.Component {
+    constructor(props) {
+        super();
+        this.state = {
+            visible: true,
+            searchText: "",
+        };
+    }
+
+    render() {
+        var userDivs = "";
+        if(this.state.visible) {
+            userDivs = this.props.users.map(function(user, index) {
+                return (
+                    <div>
+                        <div key={index}>
+                            {user.first_name}
+                            <a onClick={
+                                (e) => {
+                                    console.log("hello");
+                                }
+                            }>View</a>
+                        </div>
+                    </div>
+                    );
+            });
+        } else {
+            userDivs = "";
+        }
+
+        return (
+            <div>
+                <label for="search">Search</label>
+                <input id="search" type="text" value={this.state.searchText} onChange={
+                    (e) => {
+                        this.setState({
+                            searchText: e.target.value
+                        });
+                    }
+                }
+                />
+
+                <button onClick={
+                    (e) => {
+                        this.setState(
+                            {
+                                visible: !this.state.visible
+                            }
+                        );
+                    }
+                }>
+                </button>
+                {userDivs}
+            </div>
+        );
+    }
+
+}
+
+
+export default ListOfUsers;

src/components/UserDetail.js

@@ -0,0 +1,16 @@
+import React from "react";
+import UserInfo from "./UserInfo";
+
+function UserDetail(props) {
+
+    // whoever uses userdetail better have provided a user on props
+    const {user} = props;
+    const {first_name, last_name, occupation, phone,address, avatar} = user;
+    return (
+        <div>
+            <UserInfo />
+        </div>
+    );
+}
+
+export default UserDetail;

src/components/UserInfo.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+function UserInfo(props) {
+    console.log('userinfoprops', props);
+      debugger;
+
+    let users = props.test;
+    let userDivs = users.map(function(user, index) {
+        return <ul key={index}>
+                    <li>
+                        {user.first_name} - {user.last_name}<br />
+                        {user.address}<br />
+                        {user.phone}
+                    </li>
+                </ul>
+    });
+
+    return (
+        <div>
+            {userDivs}
+        </div>
+    );
+}
+
+export default UserInfo;

src/index.js

@@ -7,7 +7,7 @@ import users from "./users";
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }