Setup

• From address book directory, run yarn install, yarn start

Do

Do

• 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

Do

• 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

Do

• Add onChange to text box
• In onChange handler function, setState the searchText to the value from the textbox

Do

• 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