# Mapping an array

Dynamically rendering content is crucial for building interactive UIs. JSX.Design simplifies this process, enabling you to map arrays to components like lists, tables, or grids. Whether it's rendering a product catalogue or user profiles, JSX.Design makes dynamic rendering seamless.

{% embed url="<https://youtu.be/z6a6Qq6mviI>" %}

## How to Map an Array

### Step 1: Create a layout

* Design your canvas with a structure to render repeated elements (e.g., a list of items).
* For better reusability, consider converting the list item into a **custom component**. [Learn more about custom components.](broken://pages/XidhJGZf5NxaG24U45l3)

{% hint style="info" %}
**Note**: Array mapping can also be applied to regular components.
{% endhint %}

### Step 2: Enable array mapping

* Choose the parent `div` that contains the components to be repeated.
* Ensure it has only one nested component inside.
* On the Style tab, under **Div Options**, enable **array.map**
* Set a **test count** to preview how many items the array should render (e.g., 4).
* Specify the array source as a prop, e.g., `props.movielist`

### Step 3: Connect array source in code

Go back to your IDE. Inside the canvas-file tag, map the array. For example, let's say your JSX.Design canvas is named '**auth**'

```jsx
<AuthUI movielist={array} />
```

### Step 4: Link components to array

For example, you want to link the below array to a list with a *title* and *genre* for each list item.

```jsx
const movies = [
  { title: "Inception", genre: "Sci-Fi" },
  { title: "The Dark Knight", genre: "Action" },
  { title: "Interstellar", genre: "Sci-Fi" },
  { title: "Dunkirk", genre: "War" },
];
```

Here's how you can do it:

{% tabs %}
{% tab title="Regular Component" %}

* Select an element inside the list (e.g., the title).
* Navigate to the **Typography** panel, and replace the text with:

```jsx
{item.title}
```

* Similarly, for another element (e.g., description), use:

```
{item.description}
```

{% endtab %}

{% tab title="Custom Component" %}

* Right click to edit the custom component in the JSX.Design editor.
* Select an element inside the list (e.g., the title).
* Navigate to the **Typography** panel, and replace the text with:

```jsx
{props.item.title}
```

* Similarly, for another element (e.g., description), use:

```
{props.item.description}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If you’re not using a custom component, simply use `item.title` or `item.genre` without mentioning `props`.
{% endhint %}

## Previewing the results

While you won’t see the mapped data in the JSX.Design editor, the rendered output will display the data in your React application.

***

## Tips for Array Mapping

* **Dynamic Previews**: Use the test count feature in JSX.Design to approximate how the final layout will appear.
* **Custom Components**: Always prefix `props` when mapping data in custom components to ensure proper binding.

***

#### **Next Steps:**

Congratulations! You've mastered the basics. Ready to deep-dive to more advanced features?


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/jsx.design/styling-ui/mapping-an-array.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.