Task 18 : Typescript fetching data

[yogeshtakeo]

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

1. Create a new React Vite project or use an existing one.
2. Configure TypeScript in your project.

Exercise 2: Define a TypeScript Type

1. Inside your project, create a TypeScript file (e.g., types.ts) to define a type for the object you'll use.
2. Define a type called UserData with properties such as id, name, email, and any other relevant properties based on the data you expect to fetch from the JSONPlaceholder API.

Exercise 3: Implement React Component

1. Create a new React component (e.g., UserList.tsx) within your project.
2. Import the UserData type you defined in the types.ts file.
3. Inside your component, create a state variable using useState to store an array of UserData.
4. Initialize the state with an empty array.
5. Use useEffect to fetch user data from the JSONPlaceholder API (e.g., https://jsonplaceholder.typicode.com/users) when the component mounts.
6. Store the fetched data in the state.

Hint: A simple example of useEffect could be this.

 useEffect(() => {
    const fetchData  = async() =>{
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await response.json(); // the data will now be the array of users

      setUsers([...data])

      console.log(data) // here you will get the data

    }

fetchdata();

  }, []);

Exercise 4: Display Data

1. Render the user data in your component.
2. Map over the array of user data stored in the state and display relevant information (e.g., name, email) for each user.
3. Ensure that TypeScript enforces the correct types when accessing and displaying user data.

Exercise 5: Testing

1. Run your React application and ensure that it displays the user data fetched from the JSONPlaceholder API.
2. Check that TypeScript helps enforce type safety throughout your component.

Submission:

1. Create a GitHub repository for your React Vite project containing the TypeScript files and React components where you implemented these exercises.
2. Include a README.md file in your repository with explanations and examples.
3. Share the repository link for evaluation.

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.

[Youngbikalp]

Name: Bikalp Timalsina Task 18 : Typescript fetching data Github Url: https://github.com/Youngbikalp/Task-18-Typescript-fetching-data

[Narayanadhikari9]

Name: Narayan Adhikari Task 18: Typescript fetching data Url: https://github.com/Narayanadhikari9/Typescript-fetching-data

[mbasnet123456]

Name-manoj basnet Task 18 : Typescript fetching data Url-https://github.com/Narayanadhikari9/Typescript-fetching-data/tree/monoj-fetching-data1

[Madhv98]

Name: Madhav Dhital Task: 18 Typescript fetching data Github: https://github.com/Madhv98/Task18-Typescript-fetchingdata.git

[raj-maharjan99]

Raj kumar maharjan

[shantibasnet]

Shanti Basnet Task 18: Typescript fetching data URL: https://github.com/Cheesesth1/data-fetching/tree/shanti

[ghost]

Name: Prakash Karki Task 18: Typescript fetching data URL: pushing to github but got issues so no github url

[aniltimalsina]

Name : Anil Timalsina [Task 18 : Typescript fetching data] Github Link : https://github.com/aniltimalsina/typescript-fetch.git