├── .gitignore
├── README.md
├── package.json
├── public
└── index.html
├── src
├── App.css
├── App.js
├── components
│ ├── AddUser.js
│ ├── LandingPage.js
│ ├── User.js
│ └── Users.js
└── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # React form with hooks
3 |
4 | you can run:
5 |
6 | ### `yarn start`
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-hooks",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "axios": "^0.19.2",
10 | "react": "^16.13.0",
11 | "react-dom": "^16.13.0",
12 | "react-router-dom": "^5.1.2",
13 | "react-scripts": "3.4.0"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": {
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ],
30 | "development": [
31 | "last 1 chrome version",
32 | "last 1 firefox version",
33 | "last 1 safari version"
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 | React from with hooks
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 |
8 |
9 | .App {
10 | width: 75%;
11 | display: flex;
12 | flex-direction: column;
13 | text-align: center;
14 | height: 100vh;
15 | margin: auto;
16 | }
17 |
18 | form {
19 | width: 100%;
20 | margin: auto;
21 | }
22 |
23 | input {
24 | width: 35%;
25 | padding: 5px;
26 | margin: 3px 0;
27 | }
28 |
29 | button {
30 | width: 150px;
31 | height: 30px;
32 | cursor: pointer;
33 | padding: 5px;
34 | margin: 10px 0;
35 | color: #444;
36 | border: 1px solid gray;
37 | }
38 |
39 | li {
40 | list-style: none;
41 | }
42 |
43 | a {
44 | text-decoration: none;
45 | display: inline-block;
46 | border: 1px solid gray;
47 | width: 150px;
48 | height: 30px;
49 | cursor: pointer;
50 | padding: 5px;
51 | margin: 10px 0;
52 | color: #444;
53 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { BrowserRouter, Route, Switch } from 'react-router-dom'
3 | import './App.css'
4 | import AddUser from './components/AddUser'
5 | import Users from './components/Users'
6 | import LandingPage from './components/LandingPage'
7 |
8 | const App = () => {
9 | const [users, setUsers] = useState([])
10 | const addUser = user => {
11 | // const newUser2 = users.slice()
12 | // newUser2.push(user)
13 | // setUsers(newUser2)
14 | const newUser = [...users, user]
15 | setUsers(newUser)
16 | }
17 | return (
18 |
19 |
20 |
21 | }
24 | />
25 | }
28 | />
29 |
30 |
31 |
8 |
Home Sweet Home
9 |
10 | Go to users
11 |
12 |
13 | )
14 | }
15 |
16 | LandingPage.propTypes = {}
17 |
18 | export default LandingPage
19 |
--------------------------------------------------------------------------------
/src/components/User.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const User = ({ user }) => {
5 | const { firstName, lastName, email, country } = user
6 | return (
7 |
8 |
9 | {firstName} {lastName}
10 |
11 | {email}
12 | {country}
13 |
14 |
15 | )
16 | }
17 |
18 | User.propTypes = {
19 | user: PropTypes.object.isRequired
20 | }
21 |
22 | export default User
23 |
--------------------------------------------------------------------------------
/src/components/Users.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { NavLink } from 'react-router-dom'
3 | import User from './User'
4 | import PropTypes from 'prop-types'
5 |
6 | const Users = ({ users }) => {
7 | const userList = users.map(user => )
8 | return (
9 | <>
10 |
11 |
{users.length}
12 |
13 | -
14 | Add User
15 |
16 |
17 |
{userList}
19 |
20 | )
21 | }
22 |
23 | Users.propTypes = {
24 | users: PropTypes.array.isRequired
25 | }
26 |
27 | export default Users
28 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 |
5 | ReactDOM.render(, document.getElementById('root'))
6 |
--------------------------------------------------------------------------------