api_key_weather_app

Gain insights into creating five dynamic applications with ReactJS. Delve into hooks, APIs, and localStorage while building projects like to-do lists, quizzes, memory games, portfolios, and GitHub profiles.

ReactJS is one of the most well-known JavaScript frameworks. It was created by Facebook (now Meta). Being component-based and drawing on the most recent theories behind design systems, it allows you to design frontend software quickly and create dynamic user interfaces.

This course takes a project-oriented approach. You’ll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, you will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, you’ll cover fetch API and build the “Pretty Sunny” project. Next, you’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, you will implement a “Personal Portfolio” application. Finally, you will create a “GitHub Readme” profile to help you showcase your projects on GitHub.

Ultimately, you’ll be able to highlight your achievements on your resume, thus boosting your chances of landing a job.

Creating Five Impactful Applications with ReactJS

# The `ToDoList` component

Let’s now import the `ToDoList` component and set the `item` and `onDelete` properties. The `item` property contains an array of tasks that are mapped over to display a list of tasks.

The `onDeleteHandler` method handles the `onDelete` function, which deletes the tasks based on their unique ids. We return the `ToDoList` component after importing the component.

```
<form> ... </form>

<ToDoList/>
```
## Passing the list

The value of the `toDoList` state used for the `useState` hook is now stored in this `item` prop.

```
<ToDoList
  item={toDoList}
/>
```

Then we write the `onDeleteHandler` function, which takes the `itemID`. That’s the element’s unique id. We then use the `filter` method to populate `setToDoList` with all elements except for that with the given `id`.

> **Note:** Read more about the filter function from the following Educative Answer post on[filter](https://www.educative.io/answers/what-is-the-javascript-array-filter).

Each time we click the “delete” button, the `itemID` parameter takes the unique `id` of that task as the value.

```
const onDeleteHandler = (itemID) => {
  setToDoList((oldValues) =>
     oldValues.filter((item) => {
       return item.id !== itemID;
     })
  );
};
```
This function should now pass to the `ToDoList` component.

```
<ToDoList
  item={toDoList}
  onDelete={onDeleteHandler}
/>
```
We should now get the following snippet after combining all the code above:

Get to know how to pass the props in a function.


Import ToDoList Component

Get to know how to pass the props in a function.

Course Overview

My Todo List

React Fundamental Assessment

JavaScript Quiz

React Beginner Assessment

Pretty Sunny

React Intermediate Assessment

Asia Explorer

Advance Level React Assessment

Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Import ToDoList Component

The `ToDoList` component

React Fundamental Assessment

React Beginner Assessment

React Intermediate Assessment

Advance Level React Assessment

React Final Assessment

Import ToDoList Component

The ToDoList component

The `ToDoList` component