This exercise is designed to...
- Test your knowledge of
React
andjavascript
- Test some basic
css
andhtml
concepts - See how you write and organise your code
alex@eventhub.com.au
If you have any questions at any time please contact us atWe expect you to spend no more than three hours on this exercise.
Your Task
- Clone this repository and create a new version in your own github account
- In the repo directory run
npm start
- Navigate to http://localhost:3000/ in your browser
- Edit the file according to the instructions below
- Commit your changes
- Email alex@eventhub.com.au with a url to your repo
- We will contact you when we have received the email and accessed your repository
- If your repository is private you will need to grant access to https://github.com/alexi21
Instructions
In the App.js
file you will find a function getContacts
, this function mocks an API call and returns a Promise of an Array.
Your task is to create a simple table of contacts, with two filters.
The table and filters should look like this:
Filters
Name Filter
- name filter takes a string and matches against the full name (first and last name) of the contact
- leaving all contacts that have the string somewhere in either their first or last names, in the table
State Filter
- state filter should have a selectable list of all states in the contacts list
- when a state is selected should leave only those contacts from that state in the table
- the first and initial option in the selectable list should be
all
which does not filter the table
Important
-
You should NOT use any additional npm packages.
-
You SHOULD use ES6 syntax if you can.
-
Layout and other styling should be done LAST, and only if you have time.