React is a JavaScript library for building user interfaces (UI) that helps developers efficiently design complex UIs through a component-based architecture. In this course, we will delve deeply into the loops commonly used in React. Specifically, we will explore how to use loops within JSX, the main types of loops, and practical examples through sample projects.<\/p>\n
A loop is a programming structure that allows a specific task to be performed multiple times, used to repeat the same behavior for various data. The loops provided by JavaScript include JSX (JavaScript XML) is a syntax extension for JavaScript that allows HTML tags to be written directly within JavaScript code. However, typical JavaScript loops cannot be used directly in JSX, so the JavaScript Let’s look at an example of a loop using the In the code above, we are iterating through each element of the Let’s explore various types of loops that can be used in React components.<\/p>\n Although the traditional The In React, conditional rendering can be used in conjunction with loops. For instance, let’s examine how to render array elements only when they satisfy a specific condition.<\/p>\n In this section, we will create a simple Todo List application using loops. This application will manage a list of tasks input by the user as state and render the added items through loops.<\/p>\nfor<\/code>, while<\/code>, forEach<\/code>, and others. In React, they are mainly used to render array data repeatedly.<\/p>\n2. JSX and Loops<\/h2>\n
map()<\/code> method is primarily used. The map()<\/code> method executes a function on each element of an array and returns a new array as a result.<\/p>\n2.1. Using Loops with the map() Method<\/h3>\n
map()<\/code> method that is frequently used in React.<\/p>\nconst items = ['Apple', 'Banana', 'Cherry'];\n\nconst ItemList = () => {\n return (\n <ul>\n {items.map(item => <li key={item}>{item}<\/li>)}\n <\/ul>\n );\n};<\/code><\/pre>\nitems<\/code> array and converting it into list tags. At this point, we add a key<\/code> attribute to each list item to optimize performance. React helps to efficiently handle changes by comparing arrays.<\/p>\n3. Types of Loops<\/h2>\n
3.1. For Loop<\/h3>\n
for<\/code> loop cannot be used directly in JSX, it can be effectively utilized in general business logic. For example, we can use a for<\/code> loop to create an array and then output it as follows.<\/p>\nconst ItemList = () => {\n const items = [];\n for(let i = 1; i <= 5; i++) {\n items.push(`Item ${i}`);\n }\n return (\n <ul>\n {items.map(item => <li key={item}>{item}<\/li>)}\n <\/ul>\n );\n};<\/code><\/pre>\n3.2. While Loop<\/h3>\n
while<\/code> loop also cannot be used directly in JSX but is useful for state management. For example, it can be used as follows.<\/p>\nconst ItemList = () => {\n const items = [];\n let i = 1;\n while(i <= 5) {\n items.push(`Item ${i}`);\n i++;\n }\n return (\n <ul>\n {items.map(item => <li key={item}>{item}<\/li>)}\n <\/ul>\n );\n};<\/code><\/pre>\n4. Conditional Rendering and Loops<\/h2>\n
const numbers = [1, 2, 3, 4, 5];\n\nconst ItemList = () => {\n return (\n <ul>\n {numbers.map(number => number % 2 === 0 ? <li key={number}>{number}<\/li> : null)}\n <\/ul>\n );\n};<\/code><\/pre>\n5. Practical Application Using Loops<\/h2>\n
import React, { useState } from 'react';\n\nconst TodoApp = () => {\n const [todos, setTodos] = useState([]);\n const [inputValue, setInputValue] = useState('');\n\n const addTodo = () => {\n if (inputValue.trim() !== '') {\n setTodos([...todos, inputValue]);\n setInputValue('');\n }\n };\n\n return (\n <div>\n <input \n type=\"text\"\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)} \n \/>\n <button onClick={addTodo}>Add<\/button>\n <ul>\n {todos.map((todo, index) => <li key={index}>{todo}<\/li>)}\n <\/ul>\n <\/div>\n );\n};<\/code><\/pre>\n