diff --git a/README.md b/README.md index 9c7fd665..4cd102d1 100644 --- a/README.md +++ b/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 - - diff --git a/src/App.css b/src/components/App.css similarity index 100% rename from src/App.css rename to src/components/App.css diff --git a/src/App.js b/src/components/App.js similarity index 68% rename from src/App.js rename to src/components/App.js index 0042c777..19a4101b 100644 --- a/src/App.js +++ b/src/components/App.js @@ -1,10 +1,12 @@ import React from "react"; import logo from "./logo.svg"; import "./App.css"; +import ListOfUsers from "./ListOfUsers"; -function App() { - return ( -
+function App(props) { + + return ( +
logo

Welcome to React

@@ -12,8 +14,12 @@ function App() {

To get started, edit src/App.js and save to reload.

+
    + +
); + } export default App; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..3e71c004 --- /dev/null +++ b/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 ( +

+ {user.first_name}; + {user.last_name}; +

+ ); + }); + return ( +
+
+ logoWelcome to React + {userItems} +
+ ); +} + +export default Header; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js new file mode 100644 index 00000000..b70f3f59 --- /dev/null +++ b/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) => ( + + )) + return ( + Users[0] + ) +} +export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..33d93e77 --- /dev/null +++ b/src/components/UserDetail.js @@ -0,0 +1,13 @@ +import React from "react"; + +function UserDetail(props) { + return ( +
  • + {props.first_name} +   + {props.last_name} +
    • + ); +} + +export default UserDetail; diff --git a/src/logo.svg b/src/components/logo.svg similarity index 100% rename from src/logo.svg rename to src/components/logo.svg diff --git a/src/index.js b/src/index.js index 8e6bfe35..563428dd 100644 --- a/src/index.js +++ b/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( - , + , document.getElementById("root") ); } diff --git a/yarn.lock b/yarn.lock index 137072ec..1066eff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -239,7 +239,7 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" -autoprefixer@6.5.1: +autoprefixer@6.5.1, autoprefixer@^6.3.1: version "6.5.1" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.1.tgz#ae759a5221e709f3da17c2d656230e67c43cbb75" dependencies: @@ -250,17 +250,6 @@ autoprefixer@6.5.1: postcss "^5.2.4" postcss-value-parser "^3.2.3" -autoprefixer@^6.3.1: - version "6.7.2" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.2.tgz#172ab07b998ae9b957530928a59a40be54a45023" - dependencies: - browserslist "^1.7.1" - caniuse-db "^1.0.30000618" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^5.2.11" - postcss-value-parser "^3.2.3" - aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -277,7 +266,7 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0: esutils "^2.0.2" js-tokens "^3.0.0" -babel-core@6.17.0: +babel-core@6.17.0, babel-core@^6.0.0: version "6.17.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.17.0.tgz#6c4576447df479e241e58c807e4bc7da4db7f425" dependencies: @@ -303,30 +292,6 @@ babel-core@6.17.0: slash "^1.0.0" source-map "^0.5.0" -babel-core@^6.0.0: - version "6.22.1" - resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648" - dependencies: - babel-code-frame "^6.22.0" - babel-generator "^6.22.0" - babel-helpers "^6.22.0" - babel-messages "^6.22.0" - babel-register "^6.22.0" - babel-runtime "^6.22.0" - babel-template "^6.22.0" - babel-traverse "^6.22.1" - babel-types "^6.22.0" - babylon "^6.11.0" - convert-source-map "^1.1.0" - debug "^2.1.1" - json5 "^0.5.0" - lodash "^4.2.0" - minimatch "^3.0.2" - path-is-absolute "^1.0.0" - private "^0.1.6" - slash "^1.0.0" - source-map "^0.5.0" - babel-core@^6.11.4, babel-core@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.0.tgz#8f36a0a77f5c155aed6f920b844d23ba56742a02" @@ -369,7 +334,7 @@ babel-eslint@^7.1.1: babel-types "^6.23.0" babylon "^6.16.1" -babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0: +babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56" dependencies: @@ -483,14 +448,7 @@ babel-helper-get-function-arity@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-helper-hoist-variables@^6.22.0: - version "6.22.0" - resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.22.0.tgz#3eacbf731d80705845dd2e9718f600cfb9b4ba72" - dependencies: - babel-runtime "^6.22.0" - babel-types "^6.22.0" - -babel-helper-hoist-variables@^6.24.1: +babel-helper-hoist-variables@^6.22.0, babel-helper-hoist-variables@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76" dependencies: @@ -569,7 +527,7 @@ babel-helper-replace-supers@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-helpers@^6.16.0, babel-helpers@^6.22.0, babel-helpers@^6.23.0: +babel-helpers@^6.16.0, babel-helpers@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.23.0.tgz#4f8f2e092d0b6a8808a4bde79c27f1e2ecf0d992" dependencies: @@ -592,7 +550,7 @@ babel-loader@6.2.5: mkdirp "^0.5.1" object-assign "^4.0.1" -babel-messages@^6.22.0, babel-messages@^6.23.0, babel-messages@^6.8.0: +babel-messages@^6.23.0, babel-messages@^6.8.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" dependencies: @@ -1180,7 +1138,7 @@ babel-preset-react@6.16.0: babel-plugin-transform-react-jsx-self "^6.11.0" babel-plugin-transform-react-jsx-source "^6.3.13" -babel-register@^6.16.0, babel-register@^6.22.0, babel-register@^6.24.0: +babel-register@^6.16.0, babel-register@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.0.tgz#5e89f8463ba9970356d02eb07dabe3308b080cfd" dependencies: @@ -1226,7 +1184,7 @@ babel-template@^6.24.1: babylon "^6.11.0" lodash "^4.2.0" -babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.23.0, babel-traverse@^6.23.1: +babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.23.0, babel-traverse@^6.23.1: version "6.23.1" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48" dependencies: @@ -1240,7 +1198,7 @@ babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-tr invariant "^2.2.0" lodash "^4.2.0" -babel-traverse@^6.24.1: +babel-traverse@^6.22.0, babel-traverse@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695" dependencies: @@ -1254,7 +1212,7 @@ babel-traverse@^6.24.1: invariant "^2.2.0" lodash "^4.2.0" -babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.22.0, babel-types@^6.23.0: +babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf" dependencies: @@ -1263,7 +1221,7 @@ babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.22 lodash "^4.2.0" to-fast-properties "^1.0.1" -babel-types@^6.19.0, babel-types@^6.24.1: +babel-types@^6.19.0, babel-types@^6.22.0, babel-types@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975" dependencies: @@ -1382,14 +1340,14 @@ browserify-zlib@~0.1.4: dependencies: pako "~0.2.0" -browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.1: +browserslist@^1.0.1, browserslist@^1.5.2: version "1.7.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" dependencies: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@~1.4.0: +browserslist@^1.4.0, browserslist@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049" dependencies: @@ -1467,7 +1425,7 @@ caniuse-api@^1.5.2: lodash.memoize "^4.1.0" lodash.uniq "^4.3.0" -caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554, caniuse-db@^1.0.30000618, caniuse-db@^1.0.30000639: +caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554, caniuse-db@^1.0.30000639: version "1.0.30000646" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000646.tgz#c724b90d61df24286e015fc528d062073c00def4" @@ -2482,7 +2440,7 @@ events@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924" -eventsource@0.1.6, eventsource@^0.1.3: +eventsource@^0.1.3: version "0.1.6" resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232" dependencies: @@ -2579,12 +2537,6 @@ faye-websocket@^0.10.0: dependencies: websocket-driver ">=0.5.1" -faye-websocket@~0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38" - dependencies: - websocket-driver ">=0.5.1" - faye-websocket@~0.7.3: version "0.7.3" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.7.3.tgz#cc4074c7f4a4dfd03af54dd65c354b135132ce11" @@ -3043,7 +2995,7 @@ http-errors@~1.6.1: setprototypeof "1.0.3" statuses ">= 1.3.1 < 2" -http-proxy-middleware@0.17.2: +http-proxy-middleware@0.17.2, http-proxy-middleware@~0.17.1: version "0.17.2" resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.2.tgz#572d517a6d2fb1063a469de294eed96066352007" dependencies: @@ -3052,16 +3004,7 @@ http-proxy-middleware@0.17.2: lodash "^4.16.2" micromatch "^2.3.11" -http-proxy-middleware@~0.17.1: - version "0.17.3" - resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d" - dependencies: - http-proxy "^1.16.2" - is-glob "^3.1.0" - lodash "^4.17.2" - micromatch "^2.3.11" - -http-proxy@^1.15.1, http-proxy@^1.16.2: +http-proxy@^1.15.1: version "1.16.2" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742" dependencies: @@ -3260,7 +3203,7 @@ is-glob@^2.0.0, is-glob@^2.0.1: dependencies: is-extglob "^1.0.0" -is-glob@^3.0.0, is-glob@^3.1.0: +is-glob@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a" dependencies: @@ -3998,7 +3941,7 @@ lodash.words@^3.0.0: dependencies: lodash._root "^3.0.0" -lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0: +lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.2.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4866,7 +4809,7 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11, postcss@^5.2.4: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.4: version "5.2.16" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57" dependencies: @@ -5364,13 +5307,13 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.6.1: +rimraf@2, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.6.1: version "2.6.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d" dependencies: glob "^7.0.5" -rimraf@2.5.4: +rimraf@2.5.4, rimraf@^2.2.8: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -5541,7 +5484,7 @@ sntp@1.x.x: dependencies: hoek "2.x.x" -sockjs-client@1.0.3: +sockjs-client@1.0.3, sockjs-client@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.0.3.tgz#b0d8280998460eb2564c5d79d7e3d7cfd8a353ad" dependencies: @@ -5552,17 +5495,6 @@ sockjs-client@1.0.3: json3 "^3.3.2" url-parse "^1.0.1" -sockjs-client@^1.0.3: - version "1.1.2" - resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5" - dependencies: - debug "^2.2.0" - eventsource "0.1.6" - faye-websocket "~0.11.0" - inherits "^2.0.1" - json3 "^3.3.2" - url-parse "^1.1.1" - sockjs@^0.3.15: version "0.3.18" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207" @@ -5965,7 +5897,7 @@ url-parse@1.0.x: querystringify "0.0.x" requires-port "1.0.x" -url-parse@^1.0.1, url-parse@^1.1.1: +url-parse@^1.0.1: version "1.1.8" resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156" dependencies: