Task 8 : JS Basics - Githubissues

yogeshtakeo commented 1 month ago

JavaScript Basics Task: Build a Simple Data Dashboard

Objective:

Students will practice fundamental JavaScript concepts, including data types, functions, Array.map, and function calls, by building a simple data dashboard using React and Vite.

Task Overview:

Students will create a React project that displays a list of users and their information using data from an array. They will use JavaScript functions to manipulate the data and render it dynamically on the page.

Requirements:

1. Set Up the Project:

Create a React project using Vite:
- Run npm create vite@latest to create a new React project.
- Set up the project and install dependencies with npm install.
- Start the development server using npm run dev.

2. Data Types:

Create an array of objects:

Inside a data.js file, create an array of objects representing users. Each object should have properties like name (string), age (number), and occupation (string).

const users = [
{ name: "John", age: 30, occupation: "Engineer" },
{ name: "Jane", age: 25, occupation: "Designer" },
{ name: "Mike", age: 35, occupation: "Developer" }
];
export default users;

3. Functions:

Create functions to display user details:
- Write a function that takes in the users array and returns a formatted string of each user’s name and occupation.
```
function formatUser(user) {
return `${user.name} is a ${user.occupation}`;
}
```

4. `Array.map`:

Use .map() to render the user list:
- In your React component, use the Array.map() function to loop through the users array and display each user's formatted details.
```
const UserList = () => {
return (
<div>
  {users.map((user) => (
    <p key={user.name}>{formatUser(user)}</p>
  ))}
</div>
);
};
```

5. Function Call:

Call a function inside a React component:
- Ensure that formatUser() is called from within the React component to display the user information dynamically.

6. Final Output:

Render the UserList component:

In your App.js file, render the UserList component, which will display the formatted user details.

import UserList from './UserList';

function App() {
  return (
    <div>
      <h1>User Dashboard</h1>
      <UserList />
    </div>
  );
}

export default App;