View Code? Open in Web Editor
NEW
This project forked from ivome/react-demo-test
HTML 27.90%
CSS 9.91%
JavaScript 62.18%
react-demo-test's Introduction
- From address book directory, run yarn install, yarn start
- Import the array of users into index.js
- 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 first user from the array down into the UserDetail component
- Add a button to the ListOfUsers component that says Hide
- Add an onClick to the button and a handler
- Make clicking the button hide the list and change the text to “Show”
- If you click it again it will show the list and change the text back to “Hide”
- Change ListOfUsers to be a class component
- Add a constructor
- Add a property called “state” that is an object
- Add a property on the state object called "visible"
- Add a method called “render” that returns the jsx the function returned
- Add text box anywhere to ListOfUsers with a label “Search”
- In ListOfUsers add a state property “searchText”, default to “”
- Assign searchText to the value attribute of the text box
- Add onChange to text box
- In onChange handler function, setState the searchText to the value from the textbox
- 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
react-demo-test's People
Contributors
Watchers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent