Scribd
Upload
3 views

MERN React

React docs

Uploaded by

Abhishek Akabari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

MERN React

React docs

Uploaded by

Abhishek Akabari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like