Open yogeshtakeo opened 11 months ago
Name: Bikalp Timalsina
Task 18 : Typescript fetching data
Github Url: https://github.com/Youngbikalp/Task-18-Typescript-fetching-data
Name: Narayan Adhikari
Task 18: Typescript fetching data
Url: https://github.com/Narayanadhikari9/Typescript-fetching-data
Name-manoj basnet Task 18 : Typescript fetching data Url-https://github.com/Narayanadhikari9/Typescript-fetching-data/tree/monoj-fetching-data1
Name: Madhav Dhital Task: 18 Typescript fetching data Github: https://github.com/Madhv98/Task18-Typescript-fetchingdata.git
Raj kumar maharjan
Shanti Basnet Task 18: Typescript fetching data URL: https://github.com/Cheesesth1/data-fetching/tree/shanti
Name: Prakash Karki
Task 18: Typescript fetching data
URL: pushing to github but got issues so no github url
Name : Anil Timalsina [Task 18 : Typescript fetching data] Github Link : https://github.com/aniltimalsina/typescript-fetch.git
Task: Using TypeScript with React State and JSONPlaceholder API
Objective: Practice working with TypeScript by creating a type for an object, using it in a React state, and fetching and displaying data from the JSONPlaceholder API.
Task Description:
In this task, you will work on a React project with TypeScript. You'll create a type for an object, use it in the React state, and fetch data from the JSONPlaceholder API. This exercise will help you understand how TypeScript can be integrated into a real-world React application.
Exercise 1: Setting Up the React Project
Exercise 2: Define a TypeScript Type
types.ts
) to define a type for the object you'll use.UserData
with properties such asid
,name
,email
, and any other relevant properties based on the data you expect to fetch from the JSONPlaceholder API.Exercise 3: Implement React Component
UserList.tsx
) within your project.UserData
type you defined in thetypes.ts
file.useState
to store an array ofUserData
.useEffect
to fetch user data from the JSONPlaceholder API (e.g.,https://jsonplaceholder.typicode.com/users
) when the component mounts.Hint: A simple example of useEffect could be this.
Exercise 4: Display Data
Exercise 5: Testing
Submission:
Note: You may explore additional functionality such as error handling, loading indicators, or creating separate components for better organization. The key objective is to practice using TypeScript with React state and API data.