Bucle Foreach nativo de React

1. Use el método map() para iterar a través de la matriz en React-Native
2. Use el método map() para iterar a través de una matriz de objetos
3. Conclusión

A veces, los desarrolladores deben iterar a través de objetos como matrices y crear pequeños componentes mientras trabajan con React-native. En JavaScript estándar, podemos iterar a través de cada elemento de la matriz usando el bucle foreach, pero React no admite esto.

Hay varias otras formas de iterar a través de los elementos de la matriz en React, que aprenderemos en este artículo.

Use el método map() para iterar a través de la matriz en React-Native

En React-native, el método map() de la matriz funciona igual que el método foreach. Itera a través de cada elemento, y los usuarios pueden realizar alguna operación con cada elemento de la matriz.

En el siguiente ejemplo, hemos creado el nombre de matriz mensaje, que contiene el mensaje de bienvenida para los usuarios. Usamos el mapa para iterar a través de la matriz y representar cada elemento de la matriz usando el componente Texto.

Código de ejemplo:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const message = ["Welcome", "To", "DelftStack", "!"];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Displaying the Welcome Message Using the Map
      </Text>{" "}
      {/* Display all array elements in a single row */}
      <View style={{ flexDirection: "row", }}>
      {message.map((post) => {
        return <Text style={{ fontSize: 20 }}>{post} </Text>;
      })}
      </View>
    </View>
  );
}

Producción:

En el resultado anterior, los usuarios pueden observar que todos los elementos se muestran en una sola fila. Si los desarrolladores no usan el método mapa(), necesitan crear el componente Texto para cada elemento de mensaje, lo que hace que el código no sea claro.

Use el método map() para iterar a través de una matriz de objetos

Ahora, aprenderemos el uso en tiempo real del método map() de la matriz. Supongamos que los desarrolladores están desarrollando una aplicación en la que tienen que obtener los datos de los libros de la base de datos y mostrar los libros y el autor línea por línea.

Aquí, no estamos obteniendo datos del libro, pero hemos creado una matriz de objetos que contienen el autor y el título del libro. Después de eso, usamos el método mapa() haciendo referencia a la matriz libros, que devuelve el componente Texto que contiene los detalles del libro.

Código de ejemplo:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const books = [
    {
      author: "jack",
      Title: "Book 1",
    },
    {
      author: "mack",
      Title: "Book 2",
    },
    {
      author: "Shubham",
      Title: "Book 3",
    },
    {
      author: "jem",
      Title: "Book 4",
    },
  ];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Showing the Book Title and its author name
      </Text>{" "}
      {/* Display all array elements one by one */}
      <View>
        {books.map((book) => {
          return <Text style={{ fontSize: 20 }}>{book.Title} by {book.author}</Text>;
        })}
      </View>
    </View>
  );
}

Producción:

Conclusión

En este artículo, los lectores aprendieron a iterar a través de la variedad de elementos en React Native. Si los usuarios quieren iterar a través de la matriz dentro de la parte return, use el método map().

De lo contrario, los usuarios pueden utilizar el método foreach.