User Dashboard
Write React code to implement the requirements given below in the
Scenario 1: On page load
1. Display 4 buttons
2. Two list items, Email and Name
3. Placeholder Image (Link)
Scenario 2: On clicking button with value 1 (similarly 2 or 3)
● Load data from https://reqres.in/api/users/1
○ Endpoint https://reqres.in/api/users/<id>
● Display the data
○ Show email
○ First name and last name combined as Name
○ Render image with “avatar” link given
Scenario 3: On clicking button 100
● Handle the error response from the API call
● Show an alert bar instead of displaying the data
Notes
● Create a component, src/session1-takehome/UserDashboard to store the UI and
logic for this Takehome. Export the component and import it in src/App.js.
● API Endpoint - https://reqres.in/api/users/<id>
○ Eg: https://reqres.in/api/users/1
○ Ids 1-12 returns data with a 200 status code
○ Other values return {} with 404
● You must use axios to make API calls and handle errors (and not Fetch API)
○ Use the axios shorthand axios.get() to make the API request
References
1. Exports and imports
2. How to pass values inside attributes?
3. Axios
a. Axios GET request syntax (See “GET requests” section)
b. Handling errors
c. Axios vs Fetch (Need only check points 1-5)
4. Event handling in React
5. Styling in React
Tip
● async-await syntax for JavaScript with arrow functions (or function expressions)
const add = async function(a) {
let b = await fetchData();
return a + b;
};
● Understand the API response structure and status codes before starting to code
○ You can use an extension like JSONView for Chrome/Brave to format the
API response on browser
