React Course: Arrays

Hello! In this React tutorial, we will take an in-depth look at arrays. In JavaScript, arrays play a crucial role in storing and manipulating data, and in React, arrays are essential components for building the UI.

1. Basic Understanding of JavaScript Arrays

An array is a data structure that stores values sequentially. In JavaScript, arrays are a type of object that can hold various data types (strings, numbers, objects, etc.).

const fruits = ["apple", "banana", "cherry"];

The code above creates an array consisting of strings.

1.1 Key Properties and Methods of Arrays

  • length: Returns the length of the array.
  • push(): Adds a new element to the end of the array.
  • pop(): Removes the last element from the array and returns that element.
  • shift(): Removes the first element from the array and returns that element.
  • unshift(): Adds a new element to the front of the array.
  • map(): Calls a given function on every element of the array and returns a new array.
  • filter(): Extracts only the elements that meet certain criteria and returns a new array.
  • reduce(): Executes a given function on each element of the array and returns a single value.

2. Using Arrays in React

In React, arrays are primarily used for managing component state and rendering lists. Creating UI components based on arrays is a very common task.

2.1 Rendering Components with Arrays

In React, you can dynamically render the UI by iterating over an array using a loop. The most common way is to use the map() method to convert each element of the array into JSX.

function FruitList({ fruits }) {
        return (
            <ul>
                {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
            </ul>
        );
    }

The code above shows a component that takes the fruits array and renders each fruit as a list item. Each element is given a key property so that React can uniquely identify each element of the array.

2.2 Managing Arrays with State

When managing state in React, you can use arrays. You can define an array as a state using the useState hook.

import React, { useState } from 'react';

    function App() {
        const [fruits, setFruits] = useState(["apple", "banana", "cherry"]);

        const addFruit = (fruit) => {
            setFruits([...fruits, fruit]);
        };

        return (
            <div>
                <FruitList fruits={fruits} />
                <button onClick={() => addFruit("mango")}>Add</button>
            </div>
        );
    }

In the example above, the initial fruit array is set as state, and the logic to add a new fruit on button click is implemented.

3. Maintaining Array Immutability

When changing state in React, it is important that you do not directly modify the data but instead create a new data structure. Maintaining array immutability during this process is crucial.

When updating an array, it is a good practice to use the spread operator (…) to create a new array and update the state.

const removeFruit = (fruit) => {
        setFruits(fruits.filter(item => item !== fruit));
    };

4. Various Uses of Arrays: Enhancing User Experience

Using arrays in React provides many ways to enhance the user experience.

4.1 List Components

When creating list components, it is important to provide a unique key for each item. By using a unique key, React can efficiently manage changes to the list and optimize performance.

4.2 Implementing Search Functionality

You can implement search functionality that filters array data to show only the data that meets specific criteria. The filter() method can be used for this purpose.

const filteredFruits = fruits.filter(fruit => fruit.includes(searchTerm));

4.3 Sorting Arrays

You can use the sort() method to sort data in an array. For example, if you want to sort fruit names alphabetically, you can do it like this:

const sortedFruits = [...fruits].sort();

5. Conclusion

Arrays are a very important data structure in React. If you know the correct techniques and methods for handling arrays, you can provide a better interface for users. Based on what we covered in this tutorial, try out various ways to utilize arrays. With continuous practice and learning, I hope you enhance your skills as a React developer.

In the next session, I will prepare material on React Hooks, so please look forward to it.