? Component in Loop — React Native

? Quick Overview

In React Native, rendering a component inside a loop is a common pattern used to display lists of data. Instead of traditional loops like for, React uses array methods such as map() to dynamically generate UI components.

? Key Concepts

• Components can be rendered repeatedly using arrays
• map() is the preferred method for loops
• Each rendered component must have a unique key
• Reusable components improve readability

? Syntax / Theory

React Native does not allow direct looping inside JSX. Instead, JavaScript expressions are embedded inside JSX using curly braces. The map() function returns a new array of components.

? Code Example(s)

// Rendering components in a loop using map()
import React from "react";
import { View, Text } from "react-native";

const Item = ({ value }) => (
  {value}
);

export default function App() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    
      {items.map((item, index) => (
        
      ))}
    
  );
}

? Live Output / Explanation

? Interactive Example: Live Loop Simulator

Add items below to see how the Data Array (Source) is instantly mapped to UI Components (Output).

Note: Every time you add data, React runs map() and creates a new component.

? Use Cases

• Displaying lists (users, products, messages)
• Menus and navigation items
• Rendering cards or rows
• Dynamic dashboards